Question 200124 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Imported React component not being displayed

i’ve a react component that i import, but its not displayed on the page.

this is my app.js file. i imported the "functionalComponent" component but it is not getting displayed on the browser.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import functionalComponent from './functionalComponent';
import classComponent from './classComponent';

function App() {
  return (
    <div className="App">
     
      <functionalComponent/>
    </div>
  );
}

export default App;

This is my functionalComponent.js

import React from "react";

class functionalComponent extends React.Component{

    render(){
        return <p>This is a functional component.</p>
    }
}

export default functionalComponent;

and this is my App.test.js

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
Tags:

3

Answers


  1. 0 
    import React from "react";

const FunctionalComponent = () => {  
  // render() method does not exist we are no longer in a Class context
  return <p>This is a functional component.</p>   
}

export default FunctionalComponent ;

    This is how a function component should look like, just like your App component, in your example you are using a class

    Login or Signup to reply.
  2. 0

    React requires that the first letter of components be capitalized
    change your component name to FunctionalComponent and check if this fixes the issue.

    import React from "react";
const FunctionalComponent = () => {   
    return <p>Functional component</p>   
}

export default FunctionalComponent;

    Thanks

    Login or Signup to reply.
  3. 0

    the component name should be FunctionalComponent, not functionalComponent. JavaScript is case-sensitive, so the incorrect casing prevents the component from being recognized.

    import FunctionalComponent from './functionalComponent';

 function App() {
  return (
  <div className="App">
  <FunctionalComponent />
 </div>
  );
 }

export default App;

    In functionalComponent.js:
    import React from "react";

     class FunctionalComponent extends React.Component {
  render() {
 return <p>This is a functional component.</p>;
  }
 }

export default FunctionalComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search