CODEWITHSUNDEEP
javascriptreactjsparent-childstate
Eddie Taliaferro
Eddie Taliaferro

Reputation: 288

changing state of a child component (css properties)

So I have an upload page Upload which has a child component Popup which is a pop up menu. The goal here is the click a submit button on the Upload page, and change the CSS properties of the Popup component to be able to make it visible. I am fairly new to ReactJS and I havent been able to find a question on here that gets me to where I need to be.

Here is the Upload Page component. Has the button with the submit() onClick:

class Upload extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            submitted: false,
        };
        this.submit = this.submit.bind(this);
    }

    submit() {
      this.setState({
        submitWrapper: '500px',
        submitDetails: '300px',
        submitButton: 'block',
        opacity: '1',
        submitted: true
      });
      console.log(this.state)
    }



  render() {
    return(

          ....

           <button
            id="upload-submit"
            onClick={this.submit}>
            Submit
          </button>

           ....

           <Popup></Popup>

Here is the Popup Component. I am defining state here but I dont know how to change it from the parent component :(

class Popup extends React.Component {
  constructor(props) {
        super(props);

        this.state = {
          submitWrapper: '0px',
          submitDetails: '0px',
          submitButton: 'none',
          opacity: '0'
        }
  }

  render() {
    return(
      <div id="submit-message"
           style={{height: `${this.state.submitWrapper}`}}>
          <h1 style={{opacity: `${this.state.opacity}`}}> GOOD JOB </h1>
          <hr style={{opacity: `${this.state.opacity}`}} />
            <div className="submit-details"
                 style={{height: `${this.state.submitDetails}`}}>
            </div>
            <button style={{display: `${this.state.submitButton}`}}
                    onClick={this.state.submitWrapper = '0px'}> Finished </button>
      </div>
    )
  }
}
export default Popup;

I feel like I am missing something incredible easy here.

Upvotes: 0

Views: 65

Answers (2)

Shobhit Chittora
Shobhit Chittora

Reputation: 1279

While having a Component-based architecture, it's apparent to have your styles co-located with the component itself.

So instead of passing styles from the parent, styles are better managed using any css-in-js library, and then conditionally applying className.

So for your PopUp you'd have an open prop and set it from Parent. The Popup can then apply it's own styling based on the prop.

Parent

render(){
  return(){
     <PopUp open={this.state.open}/>
  }
}

PopUp

render(){
  return(){
    <div className={this.props.open ? 'popUpShow': 'popUpHide' }>
    </div>
  }
}

OR (with css-in-js lib )

render(){
  return(){
    <div className={this.props.open ? classes.popUpShow': classes.popUpHide }>
    </div>
  }
}

Hope this helps! 😇

Upvotes: 3

andrralv
andrralv

Reputation: 860

You want the submit function from your parent component to overwrite the state on your child component. You are passing onClick={this.submit}> as props to your button component but the <Popup></Popup> component does not receive this function. Add it: 

<Popup onClick={this.submit}></Popup>

Also, on your child component this line onClick={this.state.submitWrapper = '0px'}> should be onClick={this.props.onClick} if you want the function on your parent component to overwrite the state on your child component.

Upvotes: 0

Related Questions