How to pass state from one component to another in React js?

Question

I have component like below it have 4 state values

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

  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
        });
  };

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

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

I need to pass those 4 values into another component

function Header(props) {
  const { classes, avatar } = props;
  return (
    <div>
              <Typography variant="headline">KASUN FERNANDO</Typography>
              <Typography variant="subheading" color="textSecondary">
              SENIOR DESIGNER-UI/UX
              </Typography>
              <Typography variant="subheading" color="textSecondary">
              mickey@crowderia.com
              </Typography>
              <Typography variant="subheading" color="textSecondary">
              4+ years of experience
              </Typography>
    </div>
  );
}

In this component there are 4 typogrphy I need to display that state value in 4 typography

How can I do this please help me im new to React js

Answer 1

There are a lot of non redux, mobx, flux strategies on how to manage/pass state between components - Props, Instance Methods, Callbacks etc. You can read this article on component communication. You might want to take a look at these before going with a heavy weight state management framework.

From the code given, I am assuming header is a higher level component. For child to parent communication you can make use of callback functions

The parent would pass a function to the child as a prop, like this:

<MyChild myFunc={this.handleChildFunc} />

And the child would call that function like so:

this.props.myFunc();

Answer 2

How are these two components related?

Do they have the same parent components?

If yes you can handle the state in the parent component and pass the handler function down to ComposedTextField as a prop which ComposedTextField calls onChange

class ParentComponent extends React.Component {
  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }

  render() {
    return (
      <div>
        <HeaderComponent {...this.state} />
        <ComposedTextField onChange={this.handleChange} {...this.state}/>
      </div>
    )
  }
}

then inside your ComposedTextField you will have something like

class ComposedTextField extends React.Component {


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

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

Your header component will use the props to display the set values like

function Header(props) {
  const { classes, avatar } = props
  return (
    <div>
      <Typography variant="headline">{props.name}</Typography>
      <Typography variant="subheading" color="textSecondary">
        {props.title}
      </Typography>
    </div>
  )
}

Answer 3

To accomplish it, you should introduce some global state mechanism (Redux, MobX, ...).

handleChange - instead of setting data to the component's state - will dispatch actions that will write data to the global state, from which any other component, like Header, will be allowed to read.