Resolved: How to render an array of objects in React as it says objects cant be child elements

Question:

I am storing the response from an API in an array called Products. This array stores the objects returned. I am displaying the title property of the objects in a div. But getting objects cant be child elements in React error. What should I do? Also, I have tried rendering the products title (eg: Products[0].title) but even this doesn’t work. But this is not an object. So why doesn’t this work?
Code on React:

const App = () => {
  
  const [Elec,setElec] = useState("");
  const [Jewe,setJewe] = useState("");
  const [MJ,setMJ] = useState("");
  const [WMJ,setWMJ] = useState("");
  const [Products,setProducts] = useState([]);
  
  const fetcher = (e) => {
      fetch('https://fakestoreapi.com/products/categories')
      .then(res=>res.json())
      .then(json=>{
        console.log(json);
        setElec(json[0]);
        setJewe(json[1]);
        setMJ(json[2]);
        setWMJ(json[3]);
        console.log(setElec);
        
      })
    }

  const jewelleryproducts = () =>{
    fetch('https://fakestoreapi.com/products/category/jewelery')
            .then(res=>res.json())
            .then(json=>{console.log(json);
              setProducts(json);
              console.log(Products);
        
            })
  }  

    return(
      <> 
     <Head>
         <link rel="stylesheet" href="./css/general.css"></link>
     </Head>
      <div>
      <div className="searchbardiv">
        <input type="text" placeholder="Search"></input>
        <a href="./jewellery"><img decoding="async" src="./images/cart.png" typ></img></a>
        <a href="./electronics"><img decoding="async" src="./images/avatar.jpg"></img></a>
        
        </div>
      <div className="categories">
        <div> <button
        type="submit"
        onClick={e => {fetcher()}}
        >Show all categories</button></div>
        <ol>
        <li><a>{MJ}</a> </li>
        <li><a>{WMJ}</a></li>
        <li><a>{Elec}</a> </li>
        <li><button type="submit" onClick={ e => {jewelleryproducts()}}>{Jewe}</button></li>
        </ol>
      </div>
      <div className="jewelleryproducts">
          <div>{Products[0]}</div>
          <div>{Products[1]}</div>
          <div>{Products[2]}</div>
          <div>{Products[3]}</div>
          </div>


      </div>
      </>
    )
    }
export default App;

Answer:

you can do this

  <Select>
            {list.map((el) => (
              <Option key={el.code} value={=el.code}>
                {el.name}
              </Option>
            ))}
          </Select>

If you have better answer, please add a comment about this, thank you!

Resolved: How to render an array of objects in React as it says objects cant be child elements

Resolved: How to set consistent decimal separators in R data frame?

Resolved: How to resolve LNK2001 in c++ projects

Resolved: How to correctly initialize vector of number in Typescript

Leave A Reply