-1

I am trying to auto update a chart on input change. I have 3 elements : an input field (k), an array of 2 columns (x and sin(kx)) and a chart (plotting sin(kx)). I want the array and the charts to auto update on k change. No buttons to click, no reload, just an auto update on change.

Is it possible ? I have been looking all week for this to no avail.

https://codesandbox.io/s/youthful-butterfly-2e7qj?file=/src/App.js

Thank you :)

Edit : Sandbox :)

Grojibz
  • 1
  • 2

2 Answers2

0

Let's say for example this is input k

const handleChange = (e) => {
  // add your update logic here
}


Input K
<input type="text" name="inputK" onChange={handleChange} />
KnowYourElements
  • 392
  • 1
  • 12
0

I got your sandbox working.
You should learn more about the basics of react. You can't access the state the way you wanted it.
In your case, you needed to move it up and then pass the state down with props. You should give your variables also more declarative names.

https://codesandbox.io/s/stackoverflow1-ilfj1?file=/src/Array.jsx

I would also use functional components and useState hooks instead of class components. Those are pretty much outdated.

Justin
  • 367
  • 2
  • 14
  • Thank you very much ! I am learning basics, this is what basics should look like to me, we are just talking about an input change and a very simple calculation. Thank you but I will give up on this. It is less than intuitive. I cannot find good resources (tutorials) – Grojibz Jan 23 '21 at 14:03