Hey Im trying to pass through a state from a constructor component to a function component both on the same page. Just want to sync the first state with the second component. Basically I'm getting a text from the first and want to pass it to the second, anyone know how to do it ? Thanks

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

I want the this.state.fileContent to pass through the Display component that are next to each other