Добрый день, есть код :
import React from 'react';
import AuthService from './AuthService'
import axios from 'axios';
const Auth = new AuthService();
const token = Auth.getToken();
// Contaner Component (Ignore for now)
class TodoApp extends React.Component{
constructor(props){
// Pass props to parent class
super(props);
// Set initial state
this.state = {
name:'',
description:'',
done:false,
data:[],
term:'',
update:false,
payloadName:'',
payloadDescription:'',
payloadDone:''
}
this.proxyUrl = 'https://cors-anywhere.herokuapp.com/';
this.apiUrl = apiUrl;
this.config = {
headers: {
'Content-Type': 'application/json',
Authorization:'Token '+token
}
};
}
componentDidMount(){
axios({
method:'GET',
url:this.proxyUrl + this.apiUrl,
headers:{Authorization:'Token '+token},
data:null})
.then((res) => {
this.setState({data:res.data})
});
}
handleChange = event => {
this.setState({ [event.target.name]: event.target.value,
term:event.target.value });;
}
handleCheck = () => {
this.setState({done:!this.state.done})
}
handleSubmit = event => {
event.preventDefault();
const config = {
headers: {
'Content-Type': 'application/json',
Authorization:'Token '+token
}
};
const payload = JSON.stringify({
name:this.state.name,
description:this.state.description,
done:this.state.done
});
axios.post(this.proxyUrl+this.apiUrl,payload,config)
.then((res)=>{
})
}
onDeleteClick = (id) => {
axios.delete(this.proxyUrl + this.apiUrl + id + '/',this.config).then((res) => {
})
}
onUpdateClick = (id) => {
const payload = {
name:this.state.payloadName,
description:this.state.payloadDescription,
done:this.state.payloadDone
};
axios.put(this.proxyUrl + this.apiUrl + id + '/',payload,this.config).then((res) => {
})
}
handleUpdateContent = () =>{
this.setState({update:!this.state.update})
}
render(){
return (
<div>
<div>
<h1>Add you task </h1>
<form onSubmit={this.handleSubmit} className="todoform">
<label>
Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<label>
Desciption:
<input type="text" name="description" onChange={this.handleChange} />
</label>
<label>
Done:
<input type="checkbox" name="done" checked={this.state.done} onChange={this.handleCheck} />
</label>
<button type="submit">Add</button>
</form>
</div>
{
this.state.data.map(datas =>{
return (
<div className="cart" key={datas.id}>
<h1>{datas.name} </h1>
<h2>{datas.description} </h2>
<h3>{String(datas.done)} </h3>
<button type="submit" onClick={() => this.onDeleteClick(datas.id)}>Delete task </button>
<a onClick={this.handleUpdateContent}> Update task </a>
{this.state.update?
<div>
<h1>Add you update </h1>
<form >
<label>
Name:
<input type="text" name="payloadName" onChange={this.handleChange} />
</label>
<label>
Desciption:
<input type="text" name="payloadDescription" onChange={this.handleChange} />
</label>
<label>
Done:
<input type="checkbox" name="payloadDone" checked={this.state.done} onChange={this.handleCheck} />
</label>
<button type="submit" onClick={this.onUpdateClick(datas.id)}>Update</button>
</form>
</div>
: null}
</div>
)
})
}
</div>
);
}
}
export default TodoApp;
в Map есть кнопка update и вот она должна вызывать новый блок, но по клику на неё, этот блок вызывается у всех.Как это можно исправить?Я бы вынес её с map,но потом на эту кнопку нужно навешать обработчик axios.put, которому нужно id
