使用 React Hooks 添加到收藏夹并从收藏夹中查看？

Question

I have a state

const [ideas, setIdeas] = useState([{title:"test", favourite:false]);

Component Idea.jsx returns props.title and a button "fav" .

App.jsx maps through the idea[] and renders each idea.title in

<Item title = {idea.title}/>

on the page.

Problem: Every time when "fav" is clicked I want to toggle ideas[index].favourite . How to change a value of favourite only for an idea that was clicked?

How to add this exact idea to the array favourites[] ?

App.jsx

   function App() {

const [ideas, setIdeas] = useState([{title:"test", 
favourite:false}]);

const [isClicked, setIsClicked] = useState(false)

function showAllIdeas () {
setIsClicked(prevValue => {
return !prevValue
}
)
}
function mapIdeas(){return ideas.map((ideaItem, index) => {
    return (<Idea
          key = {index}
         id = {index}
         title = {ideaItem.title} 
     />
     
     );
 })}

 return ( <div>


 <Fab  color="primary" onClick={showAllIdeas}>{expandText()}</Fab>
 {isClicked && mapIdeas()}

 </div>)
 }

Item.jsx

function Idea(props) {

const [isClicked, setIsClicked] = useState(false)

function handleClick(){

 setIsClicked(prevValue => {
    return !prevValue  
 })
}
 console.log(isClicked)

return(
<div className={"idea-list" } ><p>{props.title} {isClicked ? 
<StarIcon onClick={handleClick}/> :<StarBorderIcon onClick=. 
{handleClick}/>}</p>

</div>

)
}

Answer 1

const handleFavToggle = (index) => {
   setItems(items=> {
      const data = [...items]
      data[index] = {...data[index],favourite: !data[index].favourite }
      return data
   })
}

<Item key={index} title={item.title} index={index} handleFavToggle={handleFavToggle}/>

In item component you have to handle click with handleFavToggle and pass all params