score:1
Accepted answer
this is just an example to cover your case, so let say we have the table
component which will just render all the code above
table
class table extends react.component {
constructor() {
super();
this.onchange = this.onchange.bind(this);
this.state = {
tabledata: [
['one', 'two', 'three'],
['uno', 'dos', 'tres'],
['ichi', 'ni', 'san']
]
};
}
renderrows() {
const { tabledata } = this.state;
return tabledata.map((cells, rowindex) => (
<tr key={ rowindex }>
{this.rendercells(cells, rowindex)}
</tr>
));
}
rendercells(cells, rowindex) {
return cells.map((cell, cellindex) => (
<td key={ cellindex }>
<input
cellindex={cellindex}
rowindex={rowindex}
defaultvalue={cell}
onchange={this.onchange}
/>
</td>
));
}
onchange(event, cellindex, rowindex) {
this.state.tabledata[rowindex][cellindex] = event.target.value;
const tabledata = this.state.tabledata;
console.log('values:', event.target.value, cellindex, rowindex);
console.log('tabledata:', tabledata);
this.setstate({ tabledata });
}
render() {
return (
<table>
<tbody>
{this.renderrows()}
</tbody>
</table>
);
}
}
input
function input({ onchange, cellindex, rowindex, defaultvalue }) {
const oninputchange = event => {
onchange(event, cellindex, rowindex);
};
return (
<input
type="text"
value={defaultvalue}
onchange={oninputchange}
/>
);
}
there is nothing wrong with passing the index of the elements.
as you can see in the <input />
component you can pass the reference of rowindex
and cellindex
so you the component knows which element of the array is being updated and then notify it to the parent when the onchange
event is triggered.
here is a working example of this, check it out: https://codepen.io/anon/pen/awjgkb?editors=0010
Source: stackoverflow.com
Related Query
- How to get label values dynamically and adding the numbers together from different input with reactjs
- How can I get the values of all sibling input checkboxes in a child component?
- JS/ReactJS: How to get all input values of a table?
- How to get all the values from input fields using ReactJS?
- Get all values table row input boxes
- How to store input values of a form in a array to print array data in table list in Reactjs
- how to make sure to get the latest values of input when using useState hook in ReactJs
- How to get MongoDB values and display in a table using ReactJS
- How to get input text value on click in ReactJS
- How to get values from input types using this.refs in reactjs?
- How to disable form submit button until all input fields are filled?! ReactJS ES2015
- JavaScript: How to get all object values of an object without iterator
- How can i get an input element from a component in reactjs
- How to get input value onCut in ReactJS
- how to get input field values in react?
- How to get the values for dynamically generated input field in react js?
- how to get all the values inside JSON with a common name?
- How to get input values using functional component with useState
- how to get input and display in html with submit button in reactjs
- How to get music's info from input type file in ReactJs
- How to get selected values from multiple dropdowns on button click using ReactJs
- How to get value of an input text in reactjs version 16.13.1
- How take input values to GET API response?
- How to get values from dynamically created inputs with ReactJS
- How to get form values in ReactJS
- How to get default value of dropdown input in reactjs
- How to get the details of input text and send it to bacend in ReactJs
- How to get multiple checkbox values on submit reactjs
- How to loop through new input boxes renderer in React and get the values in an array?
- How to empty input values and reset state in ReactJS hooks
More Query from same tag
- NGINX - Refresh child route in SPA application
- Reactjs Pagination - unable to paginate the data
- How can I disable/enable a button depending on an Input Form on React?
- how to add pagination and fire row click event in table in react js
- How to render multi line text with return characters in React component?
- TypeError: Cannot set property 'onscroll' of null
- Function passed and invoked in child component doesn't have access to parent state value
- How can I consistently overwrite JSS styles which have indeterminate suffixes?
- How to console all reducers? reactjs
- SonarQube analysis on JSX file
- Parent State is not being updated when trying to change the parent state from child. (passing a handler as prop from parent to child)
- Add inside input a value when clicking on enter
- Having trouble with arrow function in my application
- How do I download file from public folder in React using Express
- Loading SVGs within .scss with Webpack and svgr loader
- Conditionally adding more JSX to React component based on ternary statement
- React Tinymce Quickbar add font-size options as input field
- React Component not rendering within map loop
- Displaying Image file from Database React JS and Node JS
- Is there a way to test Ant Design Modal parameter methods?
- TypeError: Cannot read properties of undefined (reading 'rejectWithValue') - Redux Toolkit
- d3 v4 + react + ES6: How to create axis programmatically?
- React onClick inside .map then change data in another sibling component
- React Router: How to re-render the page when the user presses the back button
- Object are not valid as a React child in React
- How do I italicize a queried word in a string React
- Change weekday label on Material UI picker
- Webpack-dev-server showing directory list instead of the app page
- How to apply to background-image to only one react page not whole application?
- React.js - How do I pass data from a div to a function with axios POST method?