CODEWITHSUNDEEP
javascriptreactjs
Sohel Shaikh
Sohel Shaikh

Reputation: 47

how to access value of state of Root Component in the child component

I have created a React application. In this application, I've created following components:

What I want is when the user clicks button on any of the Card, a number should get increased everytime. But I am not able to access Data here.

Can anyone help?

Here is the Card Component for your reference:

class Card extends Component {

render() {
    return (
        <div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
            <h2>Votes: {this.props.votes}</h2>
            <div>
                <img src={this.props.pic} alt='Superstar'/>
                <div>
                    <h2>{this.props.name}</h2>
                    <p>{this.props.email}</p>
                </div>
            </div>
            <ActionButton btnText="Vote Now!" clickhandler={this.onVoteButtonClick}/>
        </div>
    );
}
onVoteButtonClick = (event) => {
    console.log('It was clicked : '+this.props.id);      
}

}

Upvotes: 0

Views: 407

Answers (1)

sellmeadog
sellmeadog

Reputation: 7517

Two options which you should research more to see what suits your need best:

  1. Redux (or something similar)
  2. The new Context API available in React 16.

The gist of either solution is that you're managing application state independently of the dependent component tree(s). The Context API is arguably easier to implement whereas you'll currently find many more examples explaining the Redux approach as it's still the most common solution right now.

Upvotes: 1

Related Questions