Error it self

How it looks in VScode

Thats Toollsit component

import React, { Component } from 'react';
 import Toolitem from './Toolitem'
 import App from '../App';
  const styles = {
  ul:{
    listStyle:"none", 
     width:"300px"
    }
  }


  export default  function Toollsit(toto,title){
  return(
   {toto.map((toto)=>{return (<Toolitem toto={toto} />)})} 
  );
 };

Thats Toolitem component import React from 'react';

      const Toolitem = ({toto}) => {
         return (
             <div>
                <li>
                 {toto.title}
                </li>
              </div>
              );
            };

            export default Toolitem;
      

And thats my App.js

       import react from 'react';
       import Toollsit from './components/Toollsit'
         function App(props) {
           const toto =[
            {id:1,title:'First',completed:true},
            {id:2,title:'Second',completed:false},
            {id:3,title:'Third',completed:true},
         ];
             return (
                <span className="wrapper">
                 <Toollsit toto={toto} />
                </span>
               );
              }

          export default App;

Thank you for any help,critic I truly appreciate your feedback

CodePudding user response：

You must place the map function in <React.Fragment> tag (equivalent: <>). Additionally, the arguments should be destructed object.

  export default  function Toollsit({toto, title}){
  return(<>
   {toto.map((toto)=>{return (<Toolitem toto={toto} />)})} 
  </>);
 };