Popular posts

How to communicate between two components in reactjs in general ?

The Common way of doing this would be passing props to the parent. Both for stateful and stateless you would follow similar pattern. Only when you app gets really big you would require additional external state managers like Redux or Flux.

I have showed Some Example Below From React Documentation Website.

For a Stateful Component

According to the React Docs, the Stateful Component is Defined Below,

class Welcome extends React.Component {
    constructor(props){
        super(props);
        this.state={
            didGreetUser: true
        }
    }
render() {
    return <h1>Hello, {this.props.name} : {this.state.didGreetUser}</h1>;
  }
}

Greet The User Using The Component by Passing Props

class Greet extends React.Component {
  render() {
    return <Welcome name="David" />;
  }
}

The Output of the Above Would be Hello, David : true

For a Stateless Component

Here You don't have states so, here you need to convert to a prop.

let Welcome = (props) =>  {
  return <h1>Hello, {props.name} : {props.didGreetUser}</h1>;
}

let App = (props) => {
return <Welcome name="Sara" didGreetUser={true} />
}

The Output of the Above Would be Hello, Sara : true

For Further Reading Go through, This Link

I hope this helps whoever is looking for answers.