CODEWITHSUNDEEP
javascriptreactjscomponents
Gogumania
Gogumania

Reputation: 103

React - render component when clicking on a component which is not its child

I'm trying to figure out how to make components communicate with each other in React. I have a large component App. In it I have 2 components: ParentComponentOne and ParentComponentTwo. In ParentComponentOne I have a component called ChildParentOne. How can i render the ParentComponentTwo only when clicking on ChildParent One

App.jsx

import React, { Component } from 'react';
import ParentComponentOne from 'ParentComponentOne';
import ParentComponentTwo from 'ParentComponentTwo';
import './App.css';

class App extends Component {
  state = {
      show:{
        componentTwo: false
      }
  };

  render() {
    return (
     <div>
       <ParentComponentOne />
       {this.state.show.componentTwo? <ParentComponentTwo /> : null}
     </div>
    );
  }
}

export default App;

ParentComponentOne.jsx

import React, { Component } from 'react';
import ChildParentOne from 'ChildParentOne';

class ParentComponentOne extends Component {

  render() {
    return (
     <div>
       <ChildParentOne />
       <div>some content</div>
       <ChildParentOne />
     </div>
    );
  }
}
export default ParentComponentOne ;

ChildParentOne.jsx

import React, { Component } from 'react';

class ChildParentOne extends Component {

  render() {
    return (
     <div onClick={}>
       BTN
     </div>
    );
  }
}
export default ChildParentOne ;

Upvotes: 3

Views: 52

Answers (1)

dfsq
dfsq

Reputation: 193261

Pass a callback into ParentComponentOne which would change show.componentTwo state when child of it is clicked:

class App extends Component {
  state = {
      show: {
        componentTwo: false
      }
  };

  childClicked() {
    this.setState({
      show: {
        componentTwo: true
      }
    })
  }

  render() {
    return (
     <div>
       <ParentComponentOne childClicked={this.childClicked} />
       {this.state.show.componentTwo? <ParentComponentTwo /> : null}
     </div>
    );
  }
}

ParentComponentOne:

class ParentComponentOne extends Component {

  render() {
    return (
     <div>
       <ChildParentOne onBtnClick={this.props.childClicked} />
       <div>some content</div>
       <ChildParentOne onBtnClick={this.props.childClicked} />
     </div>
    );
  }
}

Now, just pass this callback into ChildParentOne similarly and use it as a prop:

class ChildParentOne extends Component {

  render() {
    return (
     <div onClick={this.props.onBtnClick}>
       BTN
     </div>
    );
  }
}

Upvotes: 1

Related Questions