I'am newbie on ReactJs, I want when I select the product name the price will be displayed, after that I put the Quantity and the total column will be displayed the result of Quantity*Price. I try to display the price, but the problem the total column always displayed NaN. As you can see the code below :
class AjouterFacture extends Component {
constructor(props) {
super(props);
this.state = {
rowData: [],
Produits: [],
Quantite: "",
Prix: [],
id: 0
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleRowDelete = this.handleRowDelete.bind(this);
this.handleRowAdd = this.handleRowAdd.bind(this);
this.handleQuantiteChange = this.handleQuantiteChange.bind(this);
this.handleselectprdtChange = this.handleselectprdtChange.bind(this);
this.PrixDisplay = this.PrixDisplay.bind(this);
this.TotalDisplay = this.TotalDisplay.bind(this);
}
componentWillReceiveProps(nextProps) {
console.log("nextProps", nextProps);
}
componentDidMount() {
axios({
method: "get",
url: "/app/getNomprod/",
withCredentials: true,
}).then(response => {
if (response && response.data) {
this.setState({
Produits: response.data
});
}
}).catch(error => console.log(error));
}
handleQuantiteChange(index, value) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
Quantite: parseInt(value, 10)
});
this.setState({
rowData: rowDataCopy
});
}
handleselectprdtChange(index, value) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
selectprdt: value
});
this.setState({
rowData: rowDataCopy,
});
}
render() {
let {
Clients
} = this.state.Clients;
var Cd = {
pointerEvents: 'none'
}
let {
Produits
} = this.state;
let {
rowData
} = this.state.rowData;
let {
Prix
} = this.state.Prix;
return (<div className="animated fadeIn">
<h6> <Label ><strong>Veuillez ajouter au moins un produit : </strong></Label></h6>
<Table responsive style={items} >
<thead style={back}>
<tr>
<th>PRODUIT</th>
<th>QUANTITE</th>
<th>PRIX UNITAIRE</th>
<th>TOTAL</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.rowData.map((data, index) => (
<tr key={index} id={index}>
<td>
{" "} <Input type="select" name="selectedcl" id="selectcl"
placeholder="Veuillez sélectionner un produit" value={data.selectprdt}
onChange={(e) => this.handleselectprdtChange(index, e.target.value)} >
<option key={-1} hidden>Choisisr un produit</option>
{ this.state.Produits.map((pdt, i) =>
<option key={i}>{pdt.Nomp}</option>
)}
</Input>
</td>
<td><Input type="number"
value={data.Quantite || 0} onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/></td>
<td>
{ this.state.Prix.map((pr, k) =>
<p key={k} >{pr.PrixV} </p>
)}
</td>
<td >
<p key={index} className='pa2 mr2 f6'>{(data.Quantite || 0) * (parseInt(this.PrixDisplay(data.selectprdt)))} </p>
</td>
<td>
<Button onClick={(e) => this.handleRowDelete(index)} active style={center} size="sm" color="danger" className="btn-pill" aria-pressed="true">Effacer</Button>
</td>{" "}
</tr>
))}
<tr>parseInt(
<td/>
<td/>
<td/>
<td/>
<td><Button onClick={this.handleRowAdd} active style={center} size="sm" color="info" className="btn-pill" aria-pressed="true">Ajouter une ligne</Button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
</Table>
</div>
);
}
PrixDisplay(selectprdt) {
return axios.get("/app/getPrixprod/" + selectprdt).then(response => {
if (response && response.data) {
this.setState({
Prix: response.data
});
}
}).catch(error => {
console.error(error);
});
}
TotalDisplay(){
return this.state.Prix.map(pr =>
parseInt(pr.PrixV));
}
handleRowDelete(row) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy.splice(row, 1);
this.setState({
rowData: rowDataCopy
});
}
handleRowAdd() {
let id = this.state.id;
id = id++;
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy.push({
selectprdt: "",
Quantite: 0,
Prix: 0
});
this.setState({
rowData: rowDataCopy,
id: id
});
}
}
export default AjouterFacture;
How can I display it ?
{(data.Quantite || 0) * (parseInt(this.PrixDisplay(data.selectprdt)))}