Oye, estoy tratando de pasar un estado de un componente constructor a un componente de función, ambos en la misma página. Solo quiero sincronizar el primer estado con el segundo componente. Básicamente estoy recibiendo un mensaje de texto del primero y quiero pasarlo al segundo, ¿alguien sabe cómo hacerlo? Gracias

 class Input extends Component{ constructor(props){ super(props); this.state = { fileName: '', fileContent: '' }; } handleFile = e => { const file = e.target.files[0]; const reader = new FileReader(); reader.readAsText(file); reader.onload = () => { this.setState({fileName: file.name, fileContent: reader.result}); if(reader.result.includes('//')){ let prevPart = null; var newText1 = reader.result newText1 = newText1 .split('\n') .filter(x => !x.includes('\/\/')) .join('\n') const newText2 = newText1.split('/').map(part => { if (part.startsWith('*') && part.endsWith('*')) { prevPart = null; return null; } if (prevPart !== null) { part = '/' + part; } prevPart = part; return part; }).filter(part => part !== null).join(''); this.setState({fileName: file.name, fileContent: newText2}) } } reader.onerror = () =>{ console.log('File Error : ', reader.error) } } render(){ return( <> <br/><br/><br/> <div className='upload_file'> <br/><br/> <h1>Choose File to import</h1> <br/><br/> <label class="custom-file-upload"> <input type='file' onChange={this.handleFile}></input>Choose File</label><br/><br/><br/> <button className='btn_disp'><Link to='/output'> Show File </Link></button> <br/><br/> <p>File Name : {this.state.fileName}</p> <p>{this.state.fileContent}</p> </div> </> ) } } const Display = (props) =>{ return( <> <h2> Display File </h2> <p>{props.fileContent}</p> </> ); };

Quiero que this.state.fileContent pase a través del componente Display que está uno al lado del otro