Как изменить состояние "лайка" c помощью put-запроса в React
Доброе утро, у меня возникла проблема с изменением лайков с помощью put-запроса.
Что я хочу сделать
У меня есть массив, который я получаю с базы данных firebase через Api. В массиве есть состояние лайков "liked":false. Я хочу сделать, чтобы с помощью put-запроса состояние менялось на "liked":true при нажатие на лайк.
Мой код
// import React from "react";
// import axios from "axios";
function App() {
// const [isDisplay, setDisplay] = React.useState(false);
// const displayAdd = () => setDisplay(!isDisplay);
const [allCards, setAllCards] = React.useState([]);
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
setLoading(true);
const apiUrl =
"https://test-api-921f7-default-rtdb.firebaseio.com/cards.json";
axios.get(apiUrl).then((resp) => {
const allCards = resp.data;
setAllCards(allCards);
setLoading(false);
});
}, []);
const likeButtonHandler = (id) => {
setAllCards(
allCards.map((item) =>
item.id === id ? { ...item, liked: !item.liked } : item
)
);
};
return (
<div className="app">
<div>
{loading
? "Loading..."
: allCards.map(({ id, name, liked, link }) => (
<div
key={id}
style={{
border: "1px solid black",
margin: "1rem",
padding: "1rem",
}}
>
<div>Name: {name}</div>
<div>Liked: {liked.toString()}</div>
<img src={link} style={{ maxWidth: "100px" }} />
<button onClick={() => likeButtonHandler(id)}>
{liked ? "unlike me" : "like me"}
</button>
</div>
))}
</div>
</div>
);
}
// export default App;
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>