React) "this.props" while sharing the "state" using router

Question

Somebody help me :(

I couldn't find "this.props.Epoint" on the result page.

It's just like "Epoint : " "IPoint : ". Empty, Empty.

I do have to receive "Epoint : 0", "IPoint : ", don't I?

Here is the code. Please save me.

<App.js>

class App extends Component {
  state = {
    EPoint: 0,
    IPoint: 0,
  };
  upEPoint = async () => {
    this.setState({
      Epoint: this.state.EPoint ++
    })
  };
  upIPoint = async () => {
    this.setState({
      Ipoint: this.state.IPoint ++
    })
  };

  render() {
    return (
      <>
      <Router>
        <Route exact path="/" component={Home} />
        <Route path="/question1" component={() => <Question1 EPoint={this.state.EPoint} IPoint={this.state.IPoint} upEPoint={this.upEPoint} upIPoint={this.upIPoint}/>} />
        <Route path="/question2" component={() => <Question2 EPoint={this.state.EPoint} IPoint={this.state.IPoint} upEPoint={this.upEPoint} upIPoint={this.upIPoint}/>} />
        <Route path="/question3" component={() => <Question3 EPoint={this.state.EPoint} IPoint={this.state.IPoint} upEPoint={this.upEPoint} upIPoint={this.upIPoint}/>} />
        <Route path="/result" component={() => <Result EPoint={this.state.EPoint} IPoint={this.state.IPoint}/>} />
      <Router/>
     </>
       
export default App;

<Result.js>

class Result extends Component {
    
    render() {
        return (
            <div>
                <header>
                    <h1> Result </h1>
                    <h5> Epoint : {this.props.Epoint}</h5>
                    <h5> Ipoint : {this.props.Ipoint}</h5>
                </header>
            </div>)
    }
}

export default Result;

score 0 · Answer 1 · answered Feb 11 '21 at 13:06

0

u cant use this.state inside setState just get prev state from arrow function then assign it to new object and return it into setState

upIPoint = async () => {
  this.setState(prev => ({
    Ipoint: prev.IPoint + 1
  })
};

answered Feb 11 '21 at 13:06

mahdi ashori

515
4
13

score 0 · Accepted Answer · answered Feb 11 '21 at 13:38

I think the first issue here is that you are trying to access Epoint from props, but the variable in state that you are passing down in props is actually EPoint (notice the capital P there). Same goes for IPoint.

Your Result.js should look like this:

import React from "react";

class Result extends React.Component {
  render() {
    return (
      <div>
        <header>
          <h1> Result </h1>
          <h5> Epoint : {this.props.EPoint}</h5>
          <h5> Ipoint : {this.props.IPoint}</h5>
        </header>
      </div>
    );
  }
}

export default Result;

As the other answers have also mentioned, you cannot set your state as you have. I am not so good with class components, but I believe you must set it something like the following:

constructor(props) {
    super(props);
    this.state = { EPoint: 0, IPoint: 0 };
  }

React) "this.props" while sharing the "state" using router

2 Answers2