[Chartjs]-Updating a Pie Chart in React as Data is Entered

by

1👍

✅

You should not be updating HTML of a React component outside of React. This means you should either be using state hooks for procedural or setState for object oriented.

So, for example:

render() {
    return (<>
       <div id="income">
              ${this.state.incomeNum}
       </div>
       <input value={this.state.incomeNum} onChange={(evt) => this.setState({incomeNum: evt.target.value})} />
    </>)

Or, in procedural:

const [incomeNum, setIncomeNum] = useState(0);

return (
    <>
        <p>${incomeNum}</p>
        <input onChange={(evt) => setIncomeNum(evt.target.value)} value={incomeNum}>
    </>
);

Leave a comment