Добавить в избранное и просматривать из избранного с помощью React Hooks? - PullRequest
Новая
       103

Добавить в избранное и просматривать из избранного с помощью React Hooks?

0 голосов
/ 14 июля 2020

У меня есть состояние 

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

Компонент Idea.jsx возвращает props.title и кнопку "fav" .

App.jsx отображает через idea[] и отображает каждое idea.title в 

<Item title = {idea.title}/>

на странице.

Проблема: Каждый раз, когда нажимается "fav" Я хочу переключить ideas[index].favourite. Как изменить значение favourite только для idea, по которому кликнули?

Как добавить это точное idea в массив favourites[]?

Приложение .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>

)
}

1 Ответ

0 голосов
/ 14 июля 2020 
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}/>

В компоненте элемента вы должны обрабатывать щелчок с помощью handleFavToggle и передавать все параметры

...