Cant Change the Input Fields in React js

Question

Parent component like below I have set the state in ContentLeft when Edit ExpertiseEdit

class Dashboard extends React.Component {
  state = {
    name: 'Your Name',
    title: 'job Title',
    email: 'Your Email',
    experience: 'Your Experience',

    languages: 'languages that used',
    tools: 'tools that used',
    knowledgeareas: 'your knowledge areas'
  };


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

  handleChangeExpertise = event => {
    this.setState({
      [event.target.languages]: event.target.value,
      [event.target.tools]: event.target.value,
      [event.target.knowledgeareas]: event.target.value
    })
  }

  render() {
    var gridStyle = {
      padding: '10px',
      height: '300px',
      resize: 'auto',
      overflow: 'auto'
    }
    return (
      <div>
        <Grid container>
          <ItemGrid xs={6}>
              <ProfileHeader {...this.state}/>
              <Grid container>
                <Grid item xs={6}>
                  <ContentLeft {...this.state}/>
                </Grid>
              </Grid>
          </ItemGrid>
          <ItemGrid xs={6}>
            <HeaderEdit onChange={this.handleChange} {...this.state} />
            <ExpertiseEdit onChange={this.handleChangeExpertise} {...this.state} />
          </ItemGrid>
        </Grid>
      </div>
    );
  }
}

ExpertiseEdit component like below

class ExpertiseEdit extends React.Component {

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

    return (
      <div>
        <Typography variant="headline">Expertise Edit</Typography>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="languages-simple">Languages</InputLabel>
          <Input name="languages" value={this.props.languages} id="languages-simple" onChange={this.props.onChange}/>
        </FormControl><br></br>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="tools-simple">Development Tools</InputLabel>
          <Input name="tools" id="tools-simple" value={this.props.tools} onChange={this.props.onChange}/>
        </FormControl><br></br>
        <FormControl fullWidth className={classes.formControl}>
          <InputLabel htmlFor="knowledgeareas-simple">Knowledge Areas</InputLabel>
          <Input name="knowledgeareas" id="knowledgeareas-simple" value={this.props.knowledgeareas} onChange={this.props.onChange}/> 
        </FormControl><br></br>
      </div>
    );
  }
}

ContentLeft component like below

function ContentLeft(props) {
  const { classes } = props;
  return (
    <div>
        <Typography variant="subheading" color="textSecondary">
        {props.languages}
        </Typography>
        <Typography variant="subheading" color="textSecondary">
        {props.tools}
        </Typography>
        <Typography variant="subheading" color="textSecondary">
        {props.knowledgeareas}
        </Typography>
    </div>
  );
}

why its not changing when I change edit text Other components (ProfileHeader and HeaderEdit) works like this

What did I do wrong Please help me with this

Answer 1

Since name property of your input elements have values as languages, tools, knowledgeareas respectively, you would need to update handleChangeExpertise function to following for state to get updated correctly,

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