I am trying to work with form elements in ReactJS but a little confused as to what would be the best way to handle the following issue. I have a component named Parent
which has 3 inputs and one dropdown. Now i am trying to setup methods to update the values of inputs and Select onChange
. I am importing that component into my App.js
file which has the state setup in it.
This is what my structure looks like:-
This is the App.js file:-
import React, { Component } from 'react';
import './App.css';
import Parent from './Parent.js'
class App extends Component {
state = {
infoState: {
title: 'New Title',
endDate: null,
startDate: null,
options: [1,2,3,4,5]
}
}
render() {
return (
<div className="App">
<Parent
title = { this.state.infoState.title }
endDate = { this.state.infoState.endDate }
startDate = { this.state.infoState.startDate }
options = { this.state.infoState.options } />
</div>
);
}
}
export default App;
And this is my Parent component:-
import React from 'react'
const Parent = (props) => {
let options = props.options.map(opt => <option key={opt}>{opt}</option>);
return (
<div>
<input value></input>
<input value></input>
<input value></input>
<select>{options}</select>
</div>
)
}
export default Parent;
So i am guessing i would have to create onChange
handlers individually but now sure how so any help will be appreciated. Thank you.