Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

  1. 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; 

    
    

  2. 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.

  1. 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;

    
    

  2. Component2.js:

    Javascript




    // Second Component
    import 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 : 

  1. Before clicking on the button:

  2. After clicking the button: 



Last Updated : 25 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads