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;