Passing Boolean State from one component to another component React.JS

Question

I want to pass Boolean State to change className from one component to another component. I tried to pass it through {this.props.isOpen}, but it did not work. How can I pass state value to another component?

Parent component

class Category extends React.Component {
constructor(props) {
     super(props);
     this.state={ isOpen: false };
     this.handleClick = this.handleClick.bind(this);
    }

handleClick() {
this.setState({ isOpen : !this.state.isOpen })
}

render() {

const categoryContainer = this.state.isOpen ? "isopen" : "";
return(
<div>
<div className="categoryContainer">
    <h3>CATEGORIES</h3>
</div>
<button onClick={this.handleClick}>Click</button>
</div>
<div className={categoryStatus} id="category">
<input className="categoryInput" type="text" value="Add Category" placeholder="Add Category" /> 
    <ul>
    <li>Greetings</li>
    <li>Main Switchboard</li>
    <li>Interjections</li>
 </ul>
 </div>
 <Main isOpen={this.state.isOpen} />
 </div>
 )}
}

Child Component

class Main extends React.Component {

render() { 
const botStatus = !this.props.isOpen ? "isopen" : "";
const botInput = !this.props.isOpen ? "isopen" : "";
return (
<div>
<div className={botStatus} id="bot">
    <h2>MASTER INTENTS</h2>
    <input className={botInput} type="text" value="Add Intent" />

</div>
</div>);
}
}

Thank you for checking my question in advance.

I don't see where Category is consuming Main. You would normally do this by passing a prop to the Child from the Parent. — ovation22
– ovation22, Commented Sep 11, 2017 at 16:31

KeshavDulal · Accepted Answer · 2017-09-11 16:42:22Z

2

Whenever you want to pass a prop to a child component (Main) from your parent component (Category) you pass it in render() function as:

render(){
  <Main
   isOpen={this.state.isOpen}
  />
}

But i don't see you importing the child component (Main) at all or using it in the render function of your parent component (Category).

You need to use a child component in parent's render function in order to pass the state (and even props) of Parent component to its child component.

You can get more info from the React Docs as well.

https://facebook.github.io/react/docs/components-and-props.html

answered Sep 11, 2017 at 16:42

KeshavDulal

4,42436 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

aaayumi Over a year ago

Thank you for your comment. I want to make it work this part const botStatus = !this.state.isOpen ? "isopen" : ""; const botInput = !this.state.isOpen ? "isopen" : "" by passing state from parent to child. I tried it with your solution but it didn't work. The value was not printed out in console either..

KeshavDulal Over a year ago

Could you show the snippet from the part where you are passing the prop from parent to the child component within the render function of Category component ? Or update the question and let us know. @ayumi

aaayumi Over a year ago

I added your snippet into 'Category' component which does not work yet..

aaayumi Over a year ago

In the end I integrated child component into parent component in order to make it work. I know it's not ideal solution.. Anyway thank you for the advice.

Rodrigo M. · Accepted Answer · 2017-09-12 02:44:42Z

Per React's Thinking in React documentation, props are "a way of passing data from parent to child."

For your example, the parent component Gallery has to include the child component Main in the render function in order to make it works.

class Main extends Component {
    render() { 
      const botStatus = this.props.isOpen ? "isOpen" : "noOpen";  
      return (
      <div>
          <div>
            <h1>{botStatus}</h1>
          </div>
       </div>
      );
    }
  }

class Gallery extends Component {
  constructor() {
       super();
        this.state = {
        isOpen: false
        };
       }

  render() {
        return(
          <div>
            <div>

                <Main isOpen={this.state.isOpen}/>

            </div>
          </div>
        );
     }
  }

Collectives™ on Stack Overflow

Passing Boolean State from one component to another component React.JS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related