Skip to content
Related Articles

Related Articles

How to send state/props to another component in React with onClick?
  • Last Updated : 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.



  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: 

My Personal Notes arrow_drop_up
Recommended Articles
Page :