Os adereços e o estado são os principais conceitos do React. Na verdade, apenas mudanças nos props e / ou gatilho de estado React para renderizar novamente seus componentes e potencialmente atualizar o DOM no navegador

Suportes : permite que você passe dados de um componente pai para um componente filho.

Estado : Enquanto os props permitem que você passe dados de um componente pai para um componente filho, o estado é usado para alterar o componente, bem, o estado de dentro. Mudanças no estado também acionam uma atualização da IU.

Enviando estado / props para outro componente usando o evento onClick: Então, primeiro armazenamos o estado / props no componente pai, ou seja, em qual componente disparamos o evento onClick. Então, para passar o estado para outro componente, simplesmente o passamos como um suporte. Para uma melhor compreensão, veja este exemplo.

Para componente baseado em classe.

  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;

Para componente baseado em função.

  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>
        )
    }

Saída : 

  1. Antes de clicar no botão:

  2. Depois de clicar no botão: