I am beginner in react js, this might sound foolish question, but i am not able to create this empty table based on number of row and columns entered in input component. and then fill those cell with some data and store it into variable. here is something that i have tried but doesn't meet the expectation,as i am not able to fetch data from these table cells https://codesandbox.io/s/brave-noether-zukhy?file=/demo.js
1 Answer
STEP -1 : first try to maintain a separate state for each of the table cells
const [tableCellsData, setTableCellsData] = useState({});
STEP -2 : try to have a unique index from the position of the array . i implemented like this
const getUniqueKeyFromArrayIndex = (rowNum, columnNum) => {
return `${rowNum}-${columnNum}`;
};
STEP -3 : attatch it to every input boxes by using the name property
<InputBase
name={getUniqueKeyFromArrayIndex(i, j)}
defaultValue="TextInput"
Value={data}
onChange={onChangeHandler}
/>
STEP -4 : pass your onChange handler function
const onChangeHandler = (e) => {
console.log(e.target.name, e.target.value);
setTableCellsData({
...tableCellsData,
[e.target.name]: e.target.value
});
};
STEP -5 : you can check if everything is working as your expectation like this
useEffect(() => {
const keys = Object.keys(tableCellsData);
keys.forEach((item) => {
const indexes = item.split("-");
console.log(
`value of the item in index ${indexes} is `,
tableCellsData[item]
);
});
}, [tableCellsData]);
here is the full example https://codesandbox.io/s/naughty-dawn-clrl2?file=/demo.js
1 Comment
hpal007
how can we have list of dictionary values as it is table, instead of just dictionary with index and value
