Question 73658 in Reactjs Question posted in
The new location for the React Documentation can be found here.

The react js component do not display – Reactjs

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

Tags:

2

Answers


  1. 0

    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>;
)
    Login or Signup to reply.
  2. 0

    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>);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search