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 (

{props.Name}

{props.CompanyName}

) } //-------------Card List Component --------------------------------------- const CardList =(props)=>{ return(

Transform every element in CardsData array to Card component with typical properties of CardsData.OCard.

{props.CardsData.map(oCard=> )}

) }

//-------------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(

this.setState({txtChngedEvent : event.target},()=>{ this.handleChange(); }) } placeholder="Github userName" required/>
Add Card

)

} } //-------------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 (

)

} }

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

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

<!--
  How did you expect the tool to behave?
  It’s fine if you’re not sure your understanding is correct.
  Just write down what you thought would happen.
-->

(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

<!--
  Did something go wrong?
  Is something broken, or not behaving as you expected?
  Please attach screenshots if possible! They are extremely helpful for diagnosing issues.
-->

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

![image](https://user-images.githubusercontent.com/12251024/34077211-93195664-e317-11e7-8605-8a97d580f096.png)

![image](https://user-images.githubusercontent.com/12251024/34077213-9995cf22-e317-11e7-811e-702b127b6999.png)

)

### Reproducible Demo

<!--
  If you can, please share a project that reproduces the issue.
  This is the single most effective way to get an issue fixed soon.

  There are two ways to do it:

    * Create a new app and try to reproduce the issue in it.
      This is useful if you roughly know where the problem is, or can’t share the real code.

    * Or, copy your app and remove things until you’re left with the minimal reproducible demo.
      This is useful for finding the root cause. You may then optionally create a new project.

  This is a good guide to creating bug demos: https://stackoverflow.com/help/mcve
  Once you’re done, push the project to GitHub and paste the link to it below:
-->

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

<!--
  What happens if you skip this step?

  We will try to help you, but in many cases it is impossible because crucial
  information is missing. In that case we'll tag an issue as having a low priority,
  and eventually close it if there is no clear direction.

  We still appreciate the report though, as eventually somebody else might
  create a reproducible example for it.

  Thanks for helping us help you!
-->

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