How to communicate between two components in reactjs in general and also how to communicate when both the components are stateless? An example will be very helpful :)
Using Props you can communicate between two component. When calling a component with in a component you can pass some props like: <Welcome name="David" />, And with in the Welcome component you will be able to access it via props.name
Thanks for inviting me but I do follow react but just having had a chance to dabble with it more x
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.
Using props. From parent to child, props. From child to parent, callback Props. Here is an example on what I am working now.
<SortableHead
label={employeeAttribute}
columnName="label"
sortCriteria={sortCriteria}
onSort={handleSort}
/>
onSort is the callback prop how child communicates with the parent.
Alexi Taylor 🚀
Software Engineer
Another approach (different than the general passing props answer) you can use the Provider Pattern to share state to nested child components.
Provider Pattern
The Provider Pattern solves the problem of prop drilling. It uses React's Context API and the compound components pattern. The Provider pattern allows sharing state anywhere in the tree without drilling props to child components by exposing the React's Context.Consumer to child components.
Compound Components
Think of compound components like the <select> and <option> elements in HTML; the parent component acts as a wrapper to all child components where the parent component (provider component) manages shared state while the child components (consumer components) can access and update the shared state.
Context API
The Context API has 3 key parts:
Parent Component
const ToggleContext = React.createContext({ on: false, toggle: () => {}, reset: () => {}, getTogglerProps: () => {} }); class Toggle extends React.Component { // Consumer, a static property // We are not exposing the entire ToggleContext object to the user // and we can use the component consumer directly off the Toggle Component static Consumer = ToggleContext.Consumer; //.... render() { // Now we'll be exposing the state and helpers via React's context API. const { children } = this.props; // Using both the provider pattern and render props pattern const ui = typeof children === "function" ? children(this.state) : children; return ( <ToggleContext.Provider value={this.state}>{ui}</ToggleContext.Provider> ); } }Child Components
function NavSwitch() { return ( <div className="nav-switch"> <Toggle.Consumer> {toggle => ( <Switch {...toggle.getTogglerProps({ on: toggle.on })} /> )} </Toggle.Consumer> </div> ); } function Text() { return ( <Toggle.Consumer> {toggle => (toggle.on ? "️️On" : "Off")} </Toggle.Consumer> ); }App Component
function App() { return ( <div className="App"> <Toggle> <div> <Header /> <Text /> </div> </Toggle> </div> ); }