Issue in set State in a sample React app

Is this a bug report?

(Yes)

Can you also reproduce the problem with npm 4.x?

(I am using npm v 3.10.10.)

Which terms did you search for in User Guide?

(Execution Faild.)

Environment

1. node -v: v6.12.2
2. npm -v: 3.10.10
3. yarn --version (if you use Yarn):
4. npm ls react-scripts (if you haven’t ejected):

Then, specify:

1. Operating system: windows 8 V 6.3 Build 9600
2. Browser and version (if relevant): Chrome Version 63.0.3239.84 (Official Build) (64-bit)

Steps to Reproduce

(Write your steps here:)

1. I created ReactJs app using create-react-app myapp1
2. I changed the code of the app.js file as followed

/*jshint esversion: 6 */
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'; 


//-------------Card Component ---------------------------------------
const Card = (props)=>
{
  return (
    <div>
      <img width="75" src={props.Image}/>
      <div className="info">
        {props.Name}
      </div>
      <div>
      {props.CompanyName}
      </div>
    </div>
  )
}
//-------------Card List Component ---------------------------------------
const CardList =(props)=>{
  return(
    <div>
      <p>Transform every element in CardsData array to Card component with typical properties of CardsData.OCard.</p>
      <br/><br/>
      {props.CardsData.map(oCard=> <Card {...oCard}/>)}
    </div>
  )
}

//-------------Form Component ---------------------------------------
class Form extends Component{
 
  state = {txtChngedEvent : ""}
  //every react event function receives an event argument which is wrapped
  //to the native javascript event object.
  handleSubmit = (event)=>
  {
       event.preventDefault();   
     axios.get(`https://api.github.com/users/${this.state.txtChngedEvent.value}`).then(
      (resp)=>   
    {
      this.setState(prevState=>({}),()=>{
        console.log(this.prevState);
      })
      this.props.DoSubmit(resp.data);
    }    
  );  
  }
handleChange = ()=>
{
  if(this.state.txtChngedEvent.value.indexOf("dd") > -1)
  {
    this.state.txtChngedEvent.value = "";
  }
  console.log('Event : Form changed Text s', this.state.txtChngedEvent.value)
}
  render()
  {    
    return(
      <form onSubmit={this.handleSubmit}>
        <input type="text" 
        value={this.state.userName}
        onChange = {       
              (event)=>
                this.setState({txtChngedEvent : event.target},()=>{
                    this.handleChange();
                })
            }
          placeholder="Github userName" required/> 
         <br/>
        <button>Add Card </button>
      </form>
    )
  }
}
//-------------Container Component ---------------------------------------
class AppCard extends Component{
  state = {
    data:
      [
        {
          Image: "https://avatars0.githubusercontent.com/u/7?v:4",
          Name: "Evan Phoenix",
          CompanyName: "@hashicorp"
        },
        {
          Image: "https://avatars1.githubusercontent.com/u/17?v:4",
          Name: "Chris Van Pelt",
          CompanyName: "crowdflower.com"
        }
      ]
  }

  AddNewCard = (cardInfo)=>
  {
    console.log(cardInfo);
    this.setState(prevState=>({CardList : prevState.CardList.concat(cardInfo)}))
  };
  render(){
    return (
      <div>
        <Form DoSubmit={this.AddNewCard}/>
        <CardList CardsData={this.state.data}/>
      </div>
    )
  }
}

const AppsFactory = {
  AppCard : AppCard
}
export default AppsFactory;

1. I installed axios using npm install axios --save, Built with no errors,but when executed , I got that this is undefined and a run time error appeared as followed :

Expected Behavior

(I expect that the this.prevState had defined and had a value and I could modify it in the context of the this.setState funtion)

Actual Behavior

(Issue appeared, and couldn’t move forward as followed :

)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[gaearon]

We all make mistakes, let’s just make sure we stay friendly to beginners in the future. 🙂

[gaearon]

@miraage

We don’t tolerate rudeness in this repository. Please avoid personal attacks and mockery in the future. If the question is off topic for a repository, there are perfectly polite ways to point that out without insulting the asker or questioning this intelligence.

@engmyahya

I’m sorry you got a rude response. It looks like you figured out the problem. Please don’t hesitate to ask questions in the future. We can’t promise to answer all of them, and issues that don’t directly relate to this repository will eventually get closed, but there’s nothing wrong with asking, and we try to help when we can!