How to display EditText details below Labels in React js?

Question

Im try to display what user input below edit text but its not working all text fields link together

How can I make it work I need to display what user enter in below Label

class ComposedTextField extends React.Component {
  state = {
    name: '',
    title: '',
    email: '',
    experience: ''
  };

  handleChange = event => {
    this.setState({ 
          name: event.target.value, 
          title: event.target.value,
          email: event.target.value,
          experience: event.target.value
        });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.container}>
        <Typography variant="headline">Header Info</Typography>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="name-simple">Name</InputLabel>
          <Input id="name-simple" value={this.state.name} onChange={this.handleChange}/>
          <p>{this.state.name}</p>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="title-simple">Title</InputLabel>
          <Input id="title-simple" value={this.state.title} onChange={this.handleChange}/>
          <p>{this.state.title}</p>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="email-simple">Email</InputLabel>
          <Input id="email-simple" value={this.state.email} onChange={this.handleChange}/> 
          <p>{this.state.email}</p>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="experience-simple">Experience</InputLabel>
          <Input id="experience-simple" value={this.state.experience} onChange={this.handleChange}/>
          <p>{this.state.experience}</p>
        </FormControl>
      </div>
    );
  }
}

How can I make this work please help me Im newbie

There are many labels. As every FormControl section has one label. which one would you like to edit? — Manoz, May 24 '18 at 05:54
now if I change one edit text all labels getting changed. if i change name it should display in name label something like that — HemalHerath, May 24 '18 at 05:56
check this example : https://stackblitz.com/edit/react-lqh7pn — Javed Shaikh, May 24 '18 at 06:02
Possible duplicate of https://stackoverflow.com/questions/21029999/react-js-identifying-different-inputs-with-one-onchange-handler ? — Johnson Samuel, May 24 '18 at 06:13

score 1 · Accepted Answer · answered May 24 '18 at 05:57

Change handleChange method to this

 handleChange = event => {
    this.setState({ [event.target.name]:event.target.value });
  };

And decorate your input text elements with name attribute i.e.

<Input name="name" id="name-simple" value={this.state.name} onChange={this.handleChange}/>

<Input name="email" id="email-simple" value={this.state.email} onChange={this.handleChange}/>

Similarly you can do it for rest of the elements.

Now when you input something in the textboxes it will be set in state with current target's name and value

score 0 · Answer 2 · answered May 24 '18 at 06:03

0

Use your handle change method like as follows. This will fix yours

handleChange = event => {
  const { name, value } = event.target
  this.setState({ [name]: value });
};

answered May 24 '18 at 06:03

Jeeva

1,550
12
15

How to display EditText details below Labels in React js?

2 Answers2