Take input value from input and add to state - reactjs

Question

I just started learning reactjs, and i can't do something simple as taking a value from an input and add to an existing variable like when im using basic javascript DOM. I tried using DOM but i guess it doesn't really works on reactjs.
I want to make a button that replaces value of 'name' property individually inside of state with input[type='text'] value, which in this case there are 3 inputs for each property.
how do i do that?
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {
data :[
{Name: 'rommy',
Ages: 24,
Occupation: 'coder'
},
{Name: 'andi',
Ages: 43,
Occupation: 'Teacher'
},
{Name: 'susilo',
Ages: 42,
Occupation: 'Mobile Dev'
}
]
}
renderBiodata = () => {
let {data} = this.state;
return data.map((val) =>{
return(
<div style={{border: '1px solid black'}}>
<div>
{val.Name}
</div>
<div>
{val.Ages}
</div>
<div>
{val.Occupation}
</div>
<div>
<input type="text"/>
</div>
<div>
<input type="button" value="Change Name" onClick="changeName"/>
</div>
<div></div>
<div></div>
</div>
)
})
}
render() {
return (
<div style={{display:'flex', justifyContent: 'center'}}>
{this.renderBiodata()}
</div>
)
}
}
export default App;

Answer 1

I created an example of how to update the state from an input.
https://codesandbox.io/s/gallant-cohen-lv8p0?fontsize=14&hidenavigation=1&theme=dark
I prefer the functional component way but also created a class component with the same behavior.
Let me know if you need more clarity.

Answer 2

You are using an Array of Object concept over here. Changing values in an Array of Object is bit complex. If you understand it well then it's good otherwise I will suggest you to read about it. :)
Suggestion - How to manage React State with Arrays
Code below is solution to your problem.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {
data: [
{ Name: "rommy", Ages: 24, Occupation: "coder", inputVal: "" },
{ Name: "andi", Ages: 43, Occupation: "Teacher", inputVal: "" },
{ Name: "susilo", Ages: 42, Occupation: "Mobile Dev", inputVal: "" }
]
};
renderBiodata = () => {
let { data } = this.state;
return data.map((val, i) => {
return (
<div style={{ border: "1px solid black" }}>
<div>{val.Name}</div>
<div>{val.Ages}</div>
<div>{val.Occupation}</div>
<div>
<input
type="text"
value={val.inputVal}
onChange={e => {
let _val = Object.assign({}, val);
_val.inputVal = e.target.value;
this.setState((state, prop) => ({
data: state.data.map((x, j) => {
if (i === j) return _val;
return x;
})
}));
}}
/>
</div>
<div>
<input
type="button"
value="Change Name"
onClick={() => {
let _val = Object.assign({}, val);
_val.Name = val.inputVal;
this.setState((state, prop) => ({
data: state.data.map((x, j) => {
if (i === j) return _val;
return x;
})
}));
}}
/>
</div>
<div />
<div />
</div>
);
});
};
render() {
return (
<div style={{ display: "flex", justifyContent: "center" }}>
{this.renderBiodata()}
</div>
);
}
}
export default App;