Question

152

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

rated 0 times [ 157] [ 5] / answers: 1 / hits: 16813 / 6 Years ago, thu, may 24, 2018, 12:00:00

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>

              [email protected]

              </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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

griffinr

Add To Favorites

Follow

Total Points: 242

Total Questions: 91

Total Answers: 105

Location: Indonesia

Member since Wed, Jul 7, 2021

3 Years ago

griffinr questions

1 How to delete a node in firebase realtime database in javascript

Mon, Oct 19, 20, 00:00, 4 Years ago

1 How to use debounce on `keyup` with Vue.js

Sat, Jul 18, 20, 00:00, 4 Years ago

1 React - how to append react component to useRef component during useEffect

Thu, Jul 2, 20, 00:00, 4 Years ago

1 Get event target inside a web component

Mon, Sep 16, 19, 00:00, 5 Years ago

1 Best Practice for retrying page.goto, page.waitForNavigation etc. in puppeteer/JavaScript

Thu, Jul 4, 19, 00:00, 5 Years ago

View All

answered 6 Years ago kaylea · Accepted Answer

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>

  )

}