Create-react-app: Issue in set State in a sample React app

[engmyahya]

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.)

[miraage]

_This guy is kidding, right?_

Let me help although I'm a little bit mad about you creating a such issue in this repository.

Your issue is not related to the create-react-app. You did a few mistakes in your own code. You should grow up and try to find error on your own.

Please, take a look at the key is used in App component to store the cards and look at key you're using in AddNewCard method.
Also, you're managing React component state in a wrong way.
Consider reading and learning React documentation. It will help you in the future.

[engmyahya]

@miraage , appreciated your response, sorry for begin wrong in selecting proper location for the post.
I am a beginner, and try to gain experience, this sample is not mine, it was from a tutorial posted on a tutor web site which was totally wrong, and i changed it on my own.
Thanks for the advise, I appreciate if you review and give me your advise also.
this was my fix

with the following result:

[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!

[miraage]

@engmyahya @gaearon sorry if my response offended you.

[gaearon]

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

[engmyahya]

@gaearon thanks for your time and interference, @miraage I did not deem the incident to be issue, but it is friendly to know that you care and took time out to say sorry.