render() method is responsible for describing the view to be rendered to the browser window. Passing data from Class component(Parent) to Arrow Functional component (Child) using props but with conditional rendering.
In the previous post, we learnt about React setState() and React Functional setState(). You can check the previous topic here.
Below One Child component (arrow functional component)
Below One Parent component (a Class component)
Press enter or click to view image in full size
Get Vinitha Subhash’s stories in your inbox
Join Medium for free to get updates from this writer.
In the above Parent component we check condition if “this.state.isShow” value is true, if it is true then Child component is rendered else null is rendered.
Any valid expression including condition check is written inside curly braces. Ex: {this.state.show ? v1 : v2 } if ‘show’ value is true then return v1 else v2.
Output of the above example
Few Points About ReactJS:
ReactJS is basically “V” in the MVC(Model, View, Controller) architecture, it covers only “View” layer of the app.
React uses the “keys” to identify elements and those keys should be unique among siblings.
Pure components in React contains only render() method.
It doesn’t matter for controlled or uncontrolled elements whether the component itself is a Functional or Class component.
