Why not repaint the component App when its state changes?

Why not add oranges, if you click the `Add 1`?

https://codesandbox.io/s/yqwkvy1n4z

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Title extends React.Component {
 render() {
 return "React-App";
}
}

class App extends React.Component {
 constructor(props) {
super(props);
 this.addFruit = this.addFruit.bind(this);
 this.state = {
 fruitList: ["Kiwi", "Banana", "Apple"]
};
}
 addFruit() {
 this.setState(prevState => {
prevState.fruitList.push("Tangerine");
 return {
 fruitList: prevState.fruitList
};
});
}
 render() {
 return (
 <div classname="App">
 <h1>Hello CodeSandbox</h1>
 the <h2>Start editing to see some magic happen!</h2>
 <button onclick="{this.add}">Add 1</button>
 <fruitlist name="{`List of" apelsinka (${this.state.fruitlist.length})`} list="{this.state.fruitList}">
</fruitlist></div>
);
}
}

class FruitList extends React.Component {
 constructor(props) {
super(props);
 this.add = this.add.bind(this);
 this.state = {
 list: props.list
};
}
 add() {
 this.setState(prevState => {
prevState.list.push("orange");
 return {
 list: prevState.list
};
});
}
 render() {
 return (
 <div classname="fruit-list">
<h1>{this.props.name}</h1>
 <button onclick="{this.add}">Add 2</button>
the <ul>
 {this.state.list.map((fruit, index) => (
 <fruitlistitem key="{index}" text="{fruit}">
))}
</fruitlistitem></ul>
</div>
);
}
}

class FruitListItem extends React.Component {
 render() {
 return <li classname="fruit-list-item">{this.props.text}</li>;
}
}

const rootElement = document.getElementById("root");
const titleElement = document.getElementsByTagName("title")[0];
console.log("titleElement", titleElement);
ReactDOM.render(<app>, rootElement);
ReactDOM.render(<title>, titleElement);</code></pre></title></app>
June 3rd 19 at 19:32
3 answers
June 3rd 19 at 19:34
Solution
Thank you all, turns out I protupil. Instead addFruit wrote add.
You about it a few people have written.
It's just the most minor of errors in your code. Main is mutating state, and a violation of the DRY principle - Lenny.Botsfo commented on June 3rd 19 at 19:37
something hints wrote it. I didn't get it.

Now we have to figure out how to make FruitList component was independent from the App. Your onClick code from FruitList associated with the method from the App. And this I do because in another place I want to use FruitList with his handler for the add button. But I'll try to fix it. - Bessie.Muller commented on June 3rd 19 at 19:40
about not to change pred. state I understand. And DRY what is this? - Bessie.Muller commented on June 3rd 19 at 19:43
, Don't Repeat Yourself - Lenny.Botsfo commented on June 3rd 19 at 19:46
June 3rd 19 at 19:36
First you muterule condition both komponentov:
this.setState(prevState => {
prevState.fruitList.push("Tangerine");
 return {
 fruitList: prevState.fruitList
};
});

That contradicts the ideology react.
Second write props in state FruitsList only in the constructor.
Well pass a non-existent handler in onClick.

The corrected version.
Learn, draw conclusions.
I thought it will be enough in the constructor to do it to the state it was BEFORE the mount

class FruitList extends React.Component {
 constructor(props) {
super(props);
 this.add = this.add.bind(this);
 this.state = {
 list: props.list
};
 }
- Lenny.Botsfo commented on June 3rd 19 at 19:39
you know what immutability? - Bessie.Muller commented on June 3rd 19 at 19:42
the agreement under which the created object should not be changed. So? - Bessie.Muller commented on June 3rd 19 at 19:45
added a corrected version in answer. There are a few changes. Disassemble. - Lenny.Botsfo commented on June 3rd 19 at 19:48
thank you! But where do you answer left? - Bessie.Muller commented on June 3rd 19 at 19:51
, that's the same. - Lenny.Botsfo commented on June 3rd 19 at 19:54
thanks , turns out I protupil. Instead addFruit wrote add. - Bessie.Muller commented on June 3rd 19 at 19:57
for not the variability of the previous state too, thanks!
and design [...prevState.fruitList, "Tangerine"]
not immediately would have guessed that ... it would be very nice to look - Lenny.Botsfo commented on June 3rd 19 at 20:00
June 3rd 19 at 19:38
Why do people never read the documentation????

https://reactjs.org/docs/state-and-lifecycle.html#...

Do Not Modify State Directly

// EDIT

And prevState.fruitList.push("Tangerine") do you think that? This mutation in its pure form.
What are you??? In the above code, I ONLY use this.setState(... - Lenny.Botsfo commented on June 3rd 19 at 19:41
And specifically the code that runs when you press the button Добавить1

addFruit() {
 this.setState(prevState => {
prevState.fruitList.push("Tangerine");
 return {
 fruitList: prevState.fruitList
};
});
 }
- Bessie.Muller commented on June 3rd 19 at 19:44
And where is the Modify State Directly? - Bessie.Muller commented on June 3rd 19 at 19:47
take.ms/fNFRJ - Lenny.Botsfo commented on June 3rd 19 at 19:50
> prevState.fruitList.push("Tangerine")

And I here that Lee is a clone of the array prevState.fruitList do? - Bessie.Muller commented on June 3rd 19 at 19:53
Thanks for the tip on the documentation. - Lenny.Botsfo commented on June 3rd 19 at 19:56

Find more questions by tags React