Quiero enviar la matriz inputArrival y inputBurst al componente secundario Barchart.js. Pero cada vez que hago esto, solo se envía el primer elemento que ingreso y no los otros elementos. Básicamente, lo que quiero es que, a medida que los datos se ingresan en Entrytable.js, se reflejen instantáneamente. EntryTable.js

 import React,{useState} from 'react'; import './tableEdit.css'; import Barchart from './Barchart'; const EntryTable = (props) => { const entry = props.numOfEntries; const [inputArrival, setInputArrival] = useState(Array(entry).fill("")); const [inputBurst, setInputBurst] = useState(Array(entry).fill("")); function changeArrival(index) { return (e) => { setInputArrival((values) => values.map((value, i) => (i === index ? e.target.value : value)));}; } function changeBurst(index) { return (e) => { setInputBurst((values) => values.map((value, i) => (i === index ? e.target.value : value)) ); }; } const ArrayEntry = Array.from({ length: entry}).map((_, i) => ( <tr key={i}> <td >P{i}</td> <td > <input type="number" value={inputArrival[i]} onChange={changeArrival(i)} /> ms </td> <td > <input type="number" value={inputBurst[i]} onChange={changeBurst(i)} /> ms </td> </tr> )); return ( <div c> <table> <thead> <tr> <th>Process</th> <th>Arrival Time</th> <th>Burst Time</th> </tr> </thead> <tbody>{ArrayEntry}</tbody> </table> <button>Click Me</button> <Barchart selected_val={entry} arrivalArray={inputArrival} ></Barchart> </div> ); }; export default EntryTable

gráfico de barras.js

 import React,{useState,useEffect} from 'react' const Barchart=(props)=>{ const sel = props.selected_val; var ar1=props.arrivalArray; console.log(ar1); }export default Barchart;