Как я могу отобразить целочисленное значение для компонента через <b>{qNumber} </b>. Код ниже

Question

Переменная состояния qNumber уже определена в Main. js. Я уже включил qNumber в вызов компонента QueNumber. js. На компоненте QueNumber. js я не могу отобразить qNumber через {qNumber} .

Пожалуйста, проверьте мой код на следующем.

qNumber уже определен как переменная состояния. Я уверен, что qNumber имеет содержимое.

MAIN.JS
-------
import React, {Component} from 'react';
import Welcome from './Welcome';
import Transaction from './Transaction';
import CashDeposit from './CashDeposit';
import AnotherTx from './AnotherTx';
import Summary from './Summary';
import QueNumber from './QueNumber';

export class StepForm extends Component {
    constructor(props){
        super(props);
    }
    state ={
        step: 1, 
        // welcome
        qNumber:1,
        accountNumber:'',
        amount:'',
        txNumber:0
    }

    nextStep=()=> {
        const {step}=this.state;
        this.setState({
            step: step + 1
        });
    }

    prevStep=() => {
        const {step}= this.state;
        this.setState({
            step: step -1
        });
    }

    newClient =() => {
        const {qNumber}=this.state;
        // q number should only increment upon exit
        // save the q number on localstorage
        this.setState({
            qNumber:qNumber+1
        });
        // force the step as first step
        this.setState({
            step: 1
        });
    }

    incTxNumber =() => {
        const {txNumber}=this.state;
        this.setState({
            txNumber:txNumber+1
        });
    }

    resetInfo =() => {
        const {accountNumber,amount}=this.state;
        this.setState({
            accountNumber:'',amount:''
            });
    }

    handleChange=input=> e => {
        this.setState({[input]:e.target.value});

    }

    showStep = () => {
        const {step,qNumber, accountNumber, amount,txNumber}=this.state;

        if (step===1)
            return (<Welcome
                nextStep={this.nextStep}
                handleChange={this.handleChange}
                />);
        if(step===2)
            return (<Transaction
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                />);
        if(step===3)
            return (<CashDeposit
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                qNumber={qNumber}
                handleChange={this.handleChange}
                accountNumber={accountNumber}
                amount={amount}
                incTxNumber={this.incTxNumber}
            />);
        if(step===4)
            return (<AnotherTx
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                resetInfo={this.resetInfo}
            />);
        if(step===5)
            return (<Summary
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
            />);
        if(step===6)
            return (<QueNumber
                prevStep={this.prevStep}
                newClient={this.newClient}
                qNumber={this.qNumber}
            />);
    }

    render(){
        // const {step}=this.state;
        // const {qNumber}=this.state;
        // const {txNumber}=this.state;
        return(
            <>
                {/* <h2>Step {step} of 6.</h2>
                <h2>THIS IS Q NUMBER {qNumber}</h2>
                <h2>Transaction Number {txNumber}</h2> */}
                {this.showStep()} 
            </>
        );
    }
}
export default StepForm;
------
QueNumber.js
------
import React, {Component} from 'react';

class QueNumber extends Component {

    continue = e => {
        e.preventDefault();
        this.props.newClient();
        }

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }

    render(){
        const {qNumber}=this.props;
        return(
            <>
            <h1>This is your Queue number: <b>{qNumber}</b></h1>
            <button className="Back" onClick={this.back}>
                « Cancel
            </button>
            <button className="Next" onClick={this.continue}> 
                 Exit
            </button> 
                    {/* this should exit the program back to main */}
            </>
        )
    }
}
export default QueNumber;

Answer 1

В компоненте QNumber вы передаете this.qNumber вместо него должно быть this.state.qNumber