title: How to add image src to the state in multi step form in react
body: <p><strong>TLDR</strong><br><br>
  I'm making an multiStep form for my project that is inspired from <a href="https://github.com/bradtraversy/react_step_form" rel="nofollow noreferrer">Brad Traversy's Tutorial of making Multi-Step form in React</a>.
  So as per the basic structure of this form <a href="https://i.stack.imgur.com/mAnKB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mAnKB.png" alt="enter image description here" /></a>
  <br>
  I made a main Parent component called <code>Multiform</code> as below</p>
  <pre><code>import React, { Component } from 'react'
  import StepOne from './StepOne'
  export class Multiform extends Component {
      state = {
      step:1,
      CountryFlag: 'https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png',
      CountryCode: ''
  };
  handleChange = (input) =&gt; (e) =&gt; {
      this.setState({ [input]: e.target.value });
  };
  
  countryFlagHandler = () =&gt;{
      this.setState({CountryFlag : this.props.state.flagImg})
    }
  render() {
      const { CountryFlag, CountryCode } = this.state;
      const values = {CountryFlag, CountryCode };
  
      switch (step) {
          case 1:
            return(
              &lt;StepOne
              handleChange={this.handleChange}
              countryFlagHandler={this.countryFlagHandler}
              values={values}
              /&gt;
  
            )
           default:
               return (&lt;h1&gt;hello React App&lt;/h1&gt;)
  
      };
  }
  }
  
  export default Multiform
  </code></pre>
  <p>and a child component  <code>StepOne</code> as below</p>
  <pre><code>import React, { Component } from 'react'
      export class StepOne extends Component {
          
          state = {
      flagImg: '',
  };
  render() {
      const { values, handleChange, countryFlagHandler } = this.props;
  
      const selectCountryChange = () =&gt; {
          const img = document.querySelector('#img');
          const select = document.querySelector('#country');
          img.src = `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`;
  
          this.setState({
              flagImg: `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`
          });
          countryFlagHandler()
      };
      return (
          &lt;div&gt;
              &lt;div class=&quot;image&quot; onChange={selectCountryChange}&gt;  
                  &lt;img src={values.CountryFlag} id=&quot;img&quot;/&gt;  
              &lt;/div&gt;
              &lt;select id=&quot;country&quot; onChange={handleChange('select')} defaultValue={values.select}&gt;  
                  &lt;option data-countryCode=&quot;IN&quot; value=&quot;91&quot;&gt;India&lt;/option&gt;  
                  &lt;option data-countryCode=&quot;US&quot; value=&quot;1&quot;&gt;US&lt;/option&gt;  
                  &lt;option data-countryCode=&quot;GB&quot; value=&quot;44&quot;&gt;UK&lt;/option&gt;  
              &lt;/select&gt; 
          &lt;/div&gt;
      )
  }
      }
      
      export default StepOne
  </code></pre>
  <p>what I'm trying to do is actually to sync and persist the data of <code>&lt;Select/&gt;</code> and <code>&lt;img&gt;</code> in <code>Multiform.js</code> Component as typically what we see in a stepper form.<br><br>
  But, As in the <code>StepOne</code></p>
  <pre><code>&lt;img src={values.CountryFlag} id=&quot;img&quot;/&gt;
  </code></pre>
  <p>the <code>img.src</code> is actually manipulated by the function <code>selectCountryChange</code> and to keep the value of <code>img.src</code> persisted I thought of creating <code>countryFlagHandler</code> in <code>Multiform</code> and importing it to <code>StepOne</code></p>
  <p>but when i selected any value, it gave me this error:</p>
  <p><strong>TypeError: Cannot read property 'flagImg' of undefined</strong></p>
  <pre><code>Registration.countryFlagHandler
  C:/Users/Rahul/Desktop/cfm-usersignup/src/public/form/registration.js:53
    50 |   this.setState({ [input]: e.target.value });
    51 | };
    52 | countryFlagHandler = () =&gt;{
  &gt; 53 |   this.setState({CountryFlag : this.props.state.flagImg})
       | ^  54 | }
    55 | 
    56 |
  </code></pre>
  <p>&amp;</p>
  <pre><code>selectCountryChange
  C:/Users/Rahul/Desktop/cfm-usersignup/src/public/form/credential.js:31
    28 |  this.setState({
    29 |      flagImg: `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`
    30 |  });
  &gt; 31 |  countryFlagHandler();
       | ^  32 | };
    33 | return (
    34 |  &lt;div&gt;
  </code></pre>
  <p>Can anyone please tell me how to rectify my error?</p>
  <p><a href="https://github.com/MeRahulAhire/cfm-dev-refined/tree/master/src/public/form" rel="nofollow noreferrer">You can also checkout my project repo for more info.</a></p>