在反应中通过多步形式的道具导入 state 的正确方法是什么

Question

I'm trying to build an stepper form in react
It has a main parent Component Register as followed:

import React, { Component } from 'react';

export class registration extends Component {
    state = {
        step:1,
        CountryFlag: 'https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png',
        CountryCode: ''
    };
    handleChange = (input) => (e) => {
        this.setState({ [input]: e.target.value });
    };

    countryFlagHandler = () =>{
        this.setState({CountryFlag : this.props.state.flagImg})
      }
    render() {
        const { CountryFlag, CountryCode } = this.state;
        const values = {CountryFlag, CountryCode };
        
        switch (step) {
            case 1:
              return(
                <Credential
                handleChange={this.handleChange}
                countryFlagHandler={this.countryFlagHandler}
                values={values}
                />
                
              )
             default:
                 return (<h1>hello React App</h1>)
           
        };
    }
}

export default registration;

and a child component Credential

import React, { Component } from 'react'

export class Credential extends Component {
    state = {
        flagImg: '',
    };
    render() {
        const { values, handleChange, countryFlagHandler } = this.props;

        const selectCountryChange = () => {
            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 (
            <div>
                <div class="image" onChange={selectCountryChange}>  
                    <img src={values.CountryFlag} id="img"/>  
                </div>
                <select id="country" onChange={handleChange('select')} defaultValue={values.select}>  
                    <option data-countryCode="IN" value="91">India</option>  
                    <option data-countryCode="US" value="1">US</option>  
                    <option data-countryCode="GB" value="44">UK</option>  
                </select> 
            </div>
        )
    }
}

export default Credential;

what I'm trying to do is actually to sync and persist the data of <Select/> and <img> in Registration.js Component as typically what we see in a stepper form.

But, As in the Credentials ,

<img src={values.CountryFlag} id="img"/>

the img.src is actually manipulated by the function selectCountryChange and to keep the value of img.src persisted I thought of creating countryFlagHandler in Registration and importing it to Credential

but when i selected any value, it gave me this error:

TypeError: Cannot read property 'flagImg' of undefined

Registration.countryFlagHandler
C:/Users/Rahul/Desktop/cfm-usersignup/src/public/form/registration.js:53
  50 |   this.setState({ [input]: e.target.value });
  51 | };
  52 | countryFlagHandler = () =>{
> 53 |   this.setState({CountryFlag : this.props.state.flagImg})
     | ^  54 | }
  55 | 
  56 |

&

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 |  });
> 31 |  countryFlagHandler();
     | ^  32 | };
  33 | return (
  34 |  <div>

Can anyone please tell me how to rectify my error?

Answer 1

In the render method of the Registration component, the step is undefined. You should use this.state.step or destructure it from your state . I don't realize why you used export class and export default together. And remember, the name of a React component must start with a capital letter.