The react js component do not display

Question

I am making a Todolist app in react js. I decomposed my application into several components that I put in a component folder and I included it in the main file, but the content is not displayed.

1. NavBar Component

   import React from "react";
   import {FalistAlt, FaCheckSquare, FaPlusSquare, FaTrash} from 'react-icons/fa';
   
   const NavBar = () => {
     <footer className="d-flex justify-content -between bg-secondary p-3" id="mainFooter">
       ‹div className="btn-group">
         <a href="https://google.com' className="btn btn-outline-dark bg-light"> FaListAlt/></a>
         <a href="https://google.com" className="btn btn-outline-dark bg-light"s<FaCheckSquare/></a>
         <a href="https: //google. com" className="btn btn-outline-dark bg-light"><FaPlusSquare/S</a>
       </div> «button className='bt btn-outline-dark bg-light'> FaTrash/></button>
     </footer>
   }
   
   export default NavBar
   

2. ToDolist component

   import React from 'react';
   import 'bootstrap/dist/css/bootstrap.min.css';
   
   const ToDOList = () => {
     <ul className="list-group m-3">
       <li className="list-group-item d-flex align-items-center">
         Ranger la vaiselle
         <button className="btn btn-sm ml-auto btn-outline-success">&#×2713;</button>
       </li>
       <li className="list-group-item d-flex align-items-center">
         Répondre appel d'offres
         <button className="btn btn-sm ml-auto btn-outline-success">&#×2713;</button>
       </li>
       <li className="list-group-item d-flex align-items-center">
         Signer contrat
         <button className="btn btn-sm ml-auto btn-outline-success">&#×2713;</button>
       </li>
       <li className="list-group-item d-flex align-items-center">
         Ranger le salon
         <button className="btn btn-sm ml-auto btn-outline-success">&#×2713 ;</button>
       </li>
     </ul>
   }
   
   export default ToDoList;
   

3. App class(include ToDOList and NavBar component)

   import React from "react";
   import ToDoList from './ToDoList';
   import NavBar from " ./NavBar';
   
   class App extends React. Component {
     render (){
       return(
         <section id='todo'>
           <h1 className="m-3">Liste de tâches</h1>
           <ToDoList />
           <NavBar/>
         </section>
       )
     }
   }
   
   export default App;
   

4. index Root file

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import 'bootstrap/dist/css/bootstrap.min.css';
   import App from "./components/App"
   
   var root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(<App/>);
   

I expected to have the list displayed, but on the contrary it is just the title that is displayed.

Incorrect display image

Answer 1

You need to return the contents of your component

for example:

const root = () => { // <<< thats just opening a closure
    <div></div>
}

compare it with:

const root = () => {
    return <div></div>;
}

or use a shorthand like

const root = () => ( // <<< use parentheses instead of brackets to omit return
    <div></div>;
)

Answer 2

You need to add a return keyword and attach your JSX with that.

NavBar Component

const NavBar = () => {
      return (<footer>...<your other elements>...</footer>);
}

ToDoList Component

const ToDoList = () => {
      return (<ul>
                <li>...</li>
                <li>...</li>
                 <li>...</li>
             </ul>);
}