title: state and props of different file components
body: <p>I apologize in advance if the answer to your question is obvious but I'm new to React and can't find the answer on your website.
  I have two components in different files in the same folder. I want to get the state of component1 in component2 but it gives me an error. How can I get the state or props of components that are in different files?.
  How can I know which element generates an event, for example if I have 7 buttons and I want to know which of them generates an event, also from components of different files.
  The components are in the same folder:
  carpeta1¬
  componente1.js
  componente2.js</p>
  <p>The code is the following:</p>
  <pre><code>//componente1.js
  import React from 'react'
  import Link from 'next/link'
  import Image from 'next/image'
  import cn1 from '../../public/lared.png'
  
  class Componente1 extends React.Component{
     constructor(props){
       super(props);
       this.cambiarSenal = this.cambiarSenal.bind(this);
       this.state = {senal: &quot;&quot;};
     }
  
     cambiarSenal(event){
       let btn = event.target;        
       this.setState({
          senal: 'https://www.lared.cl/senal-online'
       });
     }
  
     render(){
       return( 
          &lt;div className=&quot;root&quot;&gt;
              &lt;div className={styles.ctElm}&gt;
                  &lt;div className={styles.ctImg} id=&quot;ctImg&quot;&gt;&lt;Image src= {cn1} alt='cn1' className={styles.img}/&gt;&lt;/div&gt;
                     &lt;p className={styles.ctTt} onClick={this.cambiarSenal}&gt;&lt;Link href='/carpeta1/senalLive'&gt;&lt;a className={styles.enl}&gt;La Red&lt;/a&gt;&lt;/Link&gt;&lt;/p&gt;
                  &lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      });
  }
  export default Componente1;
  
  //componente2.js
  import React from 'react'    
  
  class SenalLive extends React.Component{
     render(){
       return(
          
          &lt;div className={styles.root}&gt; 
             &lt;div className={styles.cnl}&gt;
                 &lt;iframe className={styles.frm} src={state.senal}&gt;&lt;/iframe&gt;
             &lt;/div&gt;
          &lt;/div&gt;
     });
  }
  export return SenalLive;
  </code></pre>
  <p>It is summarized. In the iframe I would call the state of the component1.
  I am using state because I am going to use several <p> , each one will have the event of changing the link for the use of component2 which will change the url of the iframe according to the change of state</p>