Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142504

How to update inputs and select value with React?

$
0
0

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.


Viewing all articles
Browse latest Browse all 142504

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>