How to send state/props to another component in React with onClick?

25 Oct, 2020
The props and state are the main concepts of React. Actually, only changes in props and/ or state trigger React to rerender your components and potentially update the DOM in the browser
Props: It allows you to pass data from a parent component to a child component.
State: While props allow you to pass data from a parent component to a child component, the state is used to change the component, well, state from within. Changes to the state also trigger a UI update.
Sending state/props to another component using the onClick event: So first we store the state/props into the parent component i.e in which component where we trigger the onClick event. Then to pass the state into another component, we simply pass it as a prop. For a better understanding look at this example.
For class-based component.
App.js:JavascriptJavascript// First Component i.e. App  import React, { Component } from 'react';import './App.css'import Component2 from './Component2';  class App extends Component {        state={data:""}      changeState = () => {        this.setState({data:`state/props of parent component       is send by onClick event to another component`});          };       render(){           return (                 <div className="App">                  <Component2 data={this.state.data} />                   <div className="main-cointainer">                    <h2>Compnent1</h2>           <button  onClick={this.changeState} type="button">              Send state           </button>                    </div>            </div>           );              }}      export default App; Component2.js:JavascriptJavascriptimport React from 'react';  const Component2 = (props) => {    return (        <div className="main-cointainer">            <h2>Compnent2</h2>               <p>{props.data} </p>          </div>    )}  export default Component2;
App.js:JavascriptJavascript// First Component i.e. App  import React, { Component } from 'react';import './App.css'import Component2 from './Component2';  class App extends Component {        state={data:""}      changeState = () => {        this.setState({data:`state/props of parent component       is send by onClick event to another component`});          };       render(){           return (                 <div className="App">                  <Component2 data={this.state.data} />                   <div className="main-cointainer">                    <h2>Compnent1</h2>           <button  onClick={this.changeState} type="button">              Send state           </button>                    </div>            </div>           );              }}      export default App; 
App.js:
Javascript
// First Component i.e. App  import React, { Component } from 'react';import './App.css'import Component2 from './Component2';  class App extends Component {        state={data:""}      changeState = () => {        this.setState({data:`state/props of parent component       is send by onClick event to another component`});          };       render(){           return (                 <div className="App">                  <Component2 data={this.state.data} />                   <div className="main-cointainer">                    <h2>Compnent1</h2>           <button  onClick={this.changeState} type="button">              Send state           </button>                    </div>            </div>           );              }}      export default App; 
Component2.js:JavascriptJavascriptimport React from 'react';  const Component2 = (props) => {    return (        <div className="main-cointainer">            <h2>Compnent2</h2>               <p>{props.data} </p>          </div>    )}  export default Component2;
Component2.js:
Javascript
import React from 'react';  const Component2 = (props) => {    return (        <div className="main-cointainer">            <h2>Compnent2</h2>               <p>{props.data} </p>          </div>    )}  export default Component2;
For Function-based component.
App.js:JavascriptJavascript// First component i.e App  import React, { useState } from 'react';import './App.css'import Component2 from './Component2';  function App() {      const [state, setstate] = useState({data:""})      const changeState = () => {          setstate({data:`state/props of parent component         is send by onClick event to another component`});        };       return (          <div className="App">              <Component2 data={state.data} />               <div className="main-cointainer">                <h2>Compnent1</h2>                 <button  onClick={changeState} type="button">                  Send state                 </button>                </div>        </div>                     ); }   export default App;Component2.js:JavascriptJavascript// Second Componentimport React from 'react';import './Component2.css'  export default function Component2(props) {    return (        <div className="main-cointainer">            <h2>Compnent2</h2>               <p>{props.data} </p>          </div>    )}
App.js:JavascriptJavascript// First component i.e App  import React, { useState } from 'react';import './App.css'import Component2 from './Component2';  function App() {      const [state, setstate] = useState({data:""})      const changeState = () => {          setstate({data:`state/props of parent component         is send by onClick event to another component`});        };       return (          <div className="App">              <Component2 data={state.data} />               <div className="main-cointainer">                <h2>Compnent1</h2>                 <button  onClick={changeState} type="button">                  Send state                 </button>                </div>        </div>                     ); }   export default App;
App.js:
Javascript
// First component i.e App  import React, { useState } from 'react';import './App.css'import Component2 from './Component2';  function App() {      const [state, setstate] = useState({data:""})      const changeState = () => {          setstate({data:`state/props of parent component         is send by onClick event to another component`});        };       return (          <div className="App">              <Component2 data={state.data} />               <div className="main-cointainer">                <h2>Compnent1</h2>                 <button  onClick={changeState} type="button">                  Send state                 </button>                </div>        </div>                     ); }   export default App;
Component2.js:JavascriptJavascript// Second Componentimport React from 'react';import './Component2.css'  export default function Component2(props) {    return (        <div className="main-cointainer">            <h2>Compnent2</h2>               <p>{props.data} </p>          </div>    )}
Component2.js:
Javascript
// Second Componentimport React from 'react';import './Component2.css'  export default function Component2(props) {    return (        <div className="main-cointainer">            <h2>Compnent2</h2>               <p>{props.data} </p>          </div>    )}
Output : 
Before clicking on the button:After clicking the button: 
Before clicking on the button:
Before clicking on the button:
After clicking the button: 
After clicking the button: 
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?
How to set input type date in dd-mm-yyyy format using HTML ?
Difference Between PUT and PATCH Request