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

If the Header component is not related to composedTextField, you either need to store the data in a common parent or use redux, mobx. Check https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state/47349693#47349693 — Shubham Khatri, May 24 '18 at 07:00

score 9 · Answer 1 · answered May 24 '18 at 07:30

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

supra28 · Accepted Answer · 2018-05-24T10:55:04.430

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

I have same parant component and I do as you say there is no error but how can I display those values in Header components — HemalHerath, May 24 '18 at 07:51
@HemalHerath I have edited the answer to include a Header component, hope that helps. — supra28, May 24 '18 at 07:55
if I assign some values in state null data why I cant see them — HemalHerath, May 24 '18 at 09:33
The state is now managed by the ParentComponent you can access it there. — supra28, May 24 '18 at 09:35

score 1 · Answer 3 · answered May 24 '18 at 06:56

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.

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

3 Answers3