title: How to send synchronous data from a functional to a class based component in react?
body: <p>Hi I am learning asynchronous data handling in JavaScript and react. I want to make the data provided by an asynchronous functional component available in the state of a class based component.</p>
  <p>However I have the problem to actually access the  received data in the state of my class based component.</p>
  <p>Here is my asynchronous functional component that returns a value:</p>
  <pre><code>export function validateAudioFile () {
  
  
          setTimeout(function(){ return &quot;hallo&quot; }, 1000);
  
    }
  </code></pre>
  <p>Here is my class based component that receives the value:</p>
  <pre><code>import {validateAudioFile} from './AudioFileValidation';
  
  
  
  export class AudioUploadView extends Component {
  
  constructor(props) {
      super(props);
      this.validationReady = this.validationReady.bind(this);
  
  
  
    this.state = {
      selectedFileValidated:null
    };
  
  }
  
    validationReady= () =&gt; new Promise(resolve =&gt; {
  
      this.setState({selectedFileValidated: validateAudioFile ()}) 
  
      if (this.state.selectedFileValidated)
  
      resolve(this.state.selectedFileValidated)
  })
  
    render() {
  
  //validateAudioFile ()
  
  this.validationReady()
    .then(function(v) { 
      console.log(v); // remains undefined 
    })
  
      return (
        &lt;React.Fragment&gt;
  
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  </code></pre>
  <p>I would like to use the data for conditional rendering and other things, that's why I need it in my state.</p>
  <p>I am happy for any clarification.</p>