reactjs - nested problems about react usestate and setstate

Question

Hi I mimic a project and there is no problem but can not display the ui,I am not sure what kind of problem it is.The object project link:https://codesandbox.io/s/learning-react-color-organizer-2-iytxb?file=/src/StarRating.js

My project link:https://codesandbox.io/s/nervous-flower-xv669?file=/src/App.js My project has 2 warnings,this first warning is Each child in a list should have a unique "key" prop. which direct to the app.js:

import React, { useState } from "react";
import Data from "./color-data.json";

import RatingList from "./RatingList";
export default function App() {

   const [colors,setColors]=useState(Data)
   const removeId=id=>{
      const newcolors=colors.filter(color=>color.id !== id);
      setColors(newcolors);
   }
   
  return (
    <div>
      {
        <RatingList
          colors={colors}
          onDelete={removeId}
          
        />
      }
    </div>
  );
}

the second warning is Cannot update a component (App) while rendering a different component (ColorRating).which direct to the ColorRating.js:

import React from "react";
import Star from "./Star";
import { AiFillDelete } from "react-icons/ai";
export default function ColorRating({id,
  title,
  color,
  rating,
  onDelete = (f) => f,
  
}) {

  return (
  
    <div>
      <h1>{title}</h1>
      <h1>
        <AiFillDelete onClick={onDelete(id)} />
      </h1>
      <h1 style={{ backgroundColor: color, padding: "30px" }}> </h1>
      {[...Array(5)].map((n, i) => (
        <Star key={i} selected={rating > i} />
      ))}
      <p>{rating} of 5 stars</p>
    </div>
  
  );
}

Answer 1

No, I mean remove the { } curly brackets from the return block.

And also, change this line:

<AiFillDelete onClick={onDelete(id)} />

to this (right now you invoke it's on every rerender):

<AiFillDelete onClick={() => onDelete(id)} />