Develop Reference

Adding and deleting array of classes error

Below is my attempt to create an array of classes. The functionality of app is next: one can add or delete extra Input box and increase or decrease its value. As a result the app displays the sum of the all present tags. The issue comes with Delete function, when deleting any of components from created list it does correct math in array but rerenders the elements incorrectly. It always deletes the last component on the list even when you try to remove any others. Any hint why it's happening? Thanks
class Trade1 extends React.Component {
state = {
vl: this.props.value
}
change = (v) => {
let newValue
if (v) {
newValue = this.state.vl + 1
} else {
newValue = this.state.vl - 1
}
this.setState({vl: newValue})
this.props.onChange(newValue, this.props.index)
}
render() {
const {value, index} = this.props
return (
<div>
<button onClick={() => this.change(false)}>Down</button>
<input class="v_price" value={`${this.state.vl}`}/>
<button onClick={() => this.change(true)}>Up</button>
<button onClick={() => this.props.delete(this.props.index)}>Delete</button>
</div>
)
}
}
class Parent extends React.Component {
constructor(props){
super(props);
this.state = {
arr: [0,0,0]
}
}
onChange = (v, i) => {
let newArr = this.state.arr
newArr[i] = v
this.setState(newArr)
}
plus = () => {
let a = this.state.arr
a.push(0)
this.setState({arr: a})
}
minus = i => {
let a = this.state.arr
a.splice(i, 1)
console.log(a)
this.setState({arr: a})
}
render() {
return (
<div>
{this.state.arr.map((v, i) =>
{
return <Trade1 value={v} index={i} onChange={this.onChange} delete={this.minus}/>
}
)}
<div>{
this.state.arr.reduce((a, b) => a+b, 0 )
}</div>
<div><button onClick={this.plus}>Plus</button></div>
</div>
)
}
}
ReactDOM.render(<Parent />, document.getElementById('root'));

You are mutating the array, you should use filter and remove the element at index which you pass as an argument
minus = i => {
this.setState({
arr: this.state.arr.filter((x, j) => j !== i)
})
}

Issue
You've some state mutations. Try to use functional state updates and always return new state objects.
onChange = (v, i) => {
this.setState(prevState => ({
arr: prevState.arr.map((el, index) => index === i ? v : el)
}));
}
plus = () => {
this.setState(prevState => ({
arr: [...prevState.arr, 0],
}));
}
minus = i => {
this.setState(prevState => ({
arr: prevState.arr.filter((_, index) => index !== i),
}));
}

Adding clicked items to new array in React

I am making API calls and rendering different components within an object. One of those is illustrated below:
class Bases extends Component {
constructor() {
super();
this.state = {
'basesObject': {}
}
}
componentDidMount() {
this.getBases();
}
getBases() {
fetch('http://localhost:4000/cupcakes/bases')
.then(results => results.json())
.then(results => this.setState({'basesObject': results}))
}
render() {
let {basesObject} = this.state;
let {bases} = basesObject;
console.log(bases);
//FALSY values: undefined, null, NaN, 0, false, ""
return (
<div>
{bases && bases.map(item =>
<button key={item.key} className="boxes">
{/* <p>{item.key}</p> */}
<p>{item.name}</p>
<p>${item.price}.00</p>
{/* <p>{item.ingredients}</p> */}
</button>
)}
</div>
)
}
}
The above renders a set of buttons. All my components look basically the same.
I render my components here:
class App extends Component {
state = {
ordersArray: []
}
render() {
return (
<div>
<h1>Bases</h1>
<Bases />
<h1>Frostings</h1>
<Frostings />
<h1>Toppings</h1>
<Toppings />
</div>
);
}
}
I need to figure out the simplest way to, when a button is clicked by the user, add the key of each clicked element to a new array and I am not sure where to start. The user must select one of each, but is allowed to select as many toppings as they want.

Try this
We can use the same component for all categories. All the data is handled by the parent (stateless component).
function Buttons({ list, handleClick }) {
return (
<div>
{list.map(({ key, name, price, isSelected }) => (
<button
className={isSelected ? "active" : ""}
key={key}
onClick={() => handleClick(key)}
>
<span>{name}</span>
<span>${price}</span>
</button>
))}
</div>
);
}
Fetch data in App component, pass the data and handleClick method into Buttons.
class App extends Component {
state = {
basesArray: [],
toppingsArray: []
};
componentDidMount() {
// Get bases and toppings list, and add isSelected attribute with default value false
this.setState({
basesArray: [
{ key: "bases1", name: "bases1", price: 1, isSelected: false },
{ key: "bases2", name: "bases2", price: 2, isSelected: false },
{ key: "bases3", name: "bases3", price: 3, isSelected: false }
],
toppingsArray: [
{ key: "topping1", name: "topping1", price: 1, isSelected: false },
{ key: "topping2", name: "topping2", price: 2, isSelected: false },
{ key: "topping3", name: "topping3", price: 3, isSelected: false }
]
});
}
// for single selected category
handleSingleSelected = type => key => {
this.setState(state => ({
[type]: state[type].map(item => ({
...item,
isSelected: item.key === key
}))
}));
};
// for multiple selected category
handleMultiSelected = type => key => {
this.setState(state => ({
[type]: state[type].map(item => {
if (item.key === key) {
return {
...item,
isSelected: !item.isSelected
};
}
return item;
})
}));
};
// get final selected item
handleSubmit = () => {
const { basesArray, toppingsArray } = this.state;
const selectedBases = basesArray.filter(({ isSelected }) => isSelected);
const selectedToppings = toppingsArray.filter(({ isSelected }) => isSelected);
// submit the result here
}
render() {
const { basesArray, toppingsArray } = this.state;
return (
<div>
<h1>Bases</h1>
<Buttons
list={basesArray}
handleClick={this.handleSingleSelected("basesArray")}
/>
<h1>Toppings</h1>
<Buttons
list={toppingsArray}
handleClick={this.handleMultiSelected("toppingsArray")}
/>
</div>
);
}
}
export default App;
CSS
button {
margin: 5px;
}
button.active {
background: lightblue;
}

I think the following example would be a good start for your case.
Define a handleClick function where you can set state with setState as the following:
handleClick(item) {
this.setState(prevState => {
return {
...prevState,
clickedItems: [...prevState.clickedItems, item.key]
};
});
}
Create an array called clickedItems in constructor for state and bind handleClick:
constructor() {
super();
this.state = {
basesObject: {},
clickedItems: [],
}
this.handleClick = this.handleClick.bind(this);
}
You need to add a onClick={() => handleClick(item)} handler for onClick:
<button key={item.key} className="boxes" onClick={() => handleClick(item)}>
{/* <p>{item.key}</p> */}
<p>{item.name}</p>
<p>${item.price}.00</p>
{/* <p>{item.ingredients}</p> */}
</button>
I hope that helps!

Return multiple HOC components from Array in React JS

I am trying to declare and return multiple HOC's from any array, but keep being returned a "Functions are not valid as a React child." Error. Has anyone ran into this issue before?
JS:
....
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const withRequestAnimationFrame = () => WrappedComponent => {
class RequestAnimationFrame extends Component {
state = {
timeStamp: 0,
newItem: "Test"
};
componentDidMount() {
const min = 1;
const max = 100;
const rand = Math.floor(Math.random() * (max - min + 1)) + min;
this.setState({ timeStamp: this.state.timeStamp + rand });
}
render() {
return (
<WrappedComponent {...this.state} {...this.props} />
)
}
}
return RequestAnimationFrame;
};
const App = ({ timeStamp, newItem }) => (
<div style={styles}>
<h1>{timeStamp}</h1>
<p>{newItem}</p>
</div>
);
const arrayItems = ["EnhancedApp", "EnhancedApp2"];
const Products = ({ items }) => {
return (
items.map((item, index) => (
item = withRequestAnimationFrame()(App)
))
)
};
function Product() {
return (
<div>
<Products items={arrayItems} />
</div>
)
}
render(<Product />, document.getElementById("root"));

This line is the problem:
item = withRequestAnimationFrame()(App)
What your doing there is assigning result of withRequestAnimationFrame()(App)
function to item which is definetly not what you wanted. I assume you wanted to
render there multiple instances of withRequestAnimationFrame component. You can
do it like this:
items.map((item, index) => (
const NewComponent = withRequestAnimationFrame(item)(App);
return <NewComponent key={index}/>
))
Second problem is that you are not passing item prop to the wrapped component.
To pass item prop you should do:
const withRequestAnimationFrame = (item) => WrappedComponent => {
class RequestAnimationFrame extends React.Component {
state = {
timeStamp: 0,
newItem: item
};

React: How to update object in array map

I'm trying to update the value of an array when a button is clicked. But I can't figure out how to do so using this.setState.
export default class App extends React.Component {
state = {
counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
};
render() {
return this.state.counters.map((counter, i) => {
return (
<div>
{counter.name}, {counter.value}
<button onClick={/* increment counter.value here */}>+</button>
</div>
);
});
}
}
How do I increment counter.value when the button is clicked?

Update
Since this is the accepted answer now, let me give another optimal method after #Auskennfuchs' comment. Here we use Object.assign and index to update the current counter. With this method, we are avoiding to use unnecessary map over counters.
class App extends React.Component {
state = {
counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
};
increment = e => {
const {
target: {
dataset: { i }
}
} = e;
const { counters } = this.state;
const newCounters = Object.assign(counters, {
...counters,
[i]: { ...counters[i], value: counters[i].value + 1 }
});
this.setState({ counters: newCounters });
};
render() {
return this.state.counters.map((counter, i) => {
return (
<div>
{counter.name}, {counter.value}
{/* We are using function reference here */}
<button data-i={i} onClick={this.increment}>
+
</button>
</div>
);
});
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
As an alternative method, you can use counter name, map over the counters and increment the matched one.
class App extends React.Component {
state = {
counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
};
increment = name => {
const newCounters = this.state.counters.map(counter => {
// Does not match, so return the counter without changing.
if (counter.name !== name) return counter;
// Else (means match) return a new counter but change only the value
return { ...counter, value: counter.value + 1};
});
this.setState({counters: newCounters});
};
render() {
return this.state.counters.map((counter, i) => {
return (
<div>
{counter.name}, {counter.value}
<button onClick={() => this.increment(counter.name)}>+</button>
</div>
);
});
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
If you use the handler like above it will be recreated on every render. You can either extract it to a separate component or use datasets.
class App extends React.Component {
state = {
counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
};
increment = e => {
const {target} = e;
const newCounters = this.state.counters.map(counter => {
if (counter.name !== target.dataset.name) return counter;
return { ...counter, value: counter.value + 1};
});
this.setState({counters: newCounters});
};
render() {
return this.state.counters.map((counter, i) => {
return (
<div>
{counter.name}, {counter.value}
{ /* We are using function reference here */ }
<button data-name={counter.name} onClick={this.increment}>+</button>
</div>
);
});
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Consider refactoring the actual counter into its own component. That simplifies the state management as it encapsulates the component responsibility. Suddenly you don't need to update a nested array of objects, but you update just a single state property:
class App extends React.Component {
state = {
counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
};
render() {
return this.state.counters.map((counter, i) => {
return (
<Counter name={counter.name} count={counter.value} />
);
});
}
}
class Counter extends React.Component {
state = {
count: this.props.count
}
increment = () => {
this.setState({
count: this.state.count+1
})
}
render() {
return (
<div>
{this.props.name}, {this.state.count}
<button onClick={this.increment}>+</button>
</div>
);
}
}
ReactDOM.render( < App / > , document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

You could use the i that you already have to map the counters to a new array, replacing the target item with an updated count:
() => this.setState(({ counters }) => ({ counters: counters.map((prev, i2) => i === i2 ? { ...counter, count: counter.count + 1 } : prev) }))

You can have an handler that will map counters and update the corresponding counters item of the button clicked. Here we take i from the parent scope, and compare it to find the right item to change.
<button onClick={() => {
this.setState(state => ({
counters: state.counters.map((item, j) => {
// is this the counter that I want to update?
if (j === i) {
return {
...item,
value: item.value + 1
}
}
return item
})
}))
}}>+</button>

You can create a click handler like this
handleClick = (index) => {
this.setState(state => {
const obj = state.counters[index]; // assign the object at the index to a variable
obj.value++; // increment the value in the object
state.counters.splice(index, 1); // remove the object from the array
return { counters: [...state.counters, obj] };
});
}
Call it like this... <button onClick={() => handleClick(i)}>
It's possible to make this shorter. Just wanted to explain how you could go about it

With Array.splice you can replace an entry inside of an array. This will return a new array with the replaced value:
const {counters}= this.state
return counters.map((counter, i) => (
<div key={i}>
{counter.name}, {counter.value}
<button onClick={() => this.setState({
counters: counters.splice(i, 1, {
...counter,
value: counter.value+1,
}
)})}>+</button>
</div>
));
Also it's best practise to give every Fragment inside of a loop it's own unique key. And you can get rid of the return, because there's only the return inside of the map function.

Why am I getting Invariant Violation: Invariant Violation: Maximum update depth exceeded. on setState?

I have this component:
// imports
export default class TabViewExample extends Component {
state = {
index: 0,
routes: [
{ key: 'first', title: 'Drop-Off', selected: true },
{ key: 'second', title: 'Pick up', selected: false },
],
};
handleIndexChange = index => this.setState({ index });
handleStateIndexChange = () => { // FUNCTION WITH THE ERROR
const { index } = this.state;
this.setState(({ routes }) => ({
routes: routes.map((route, idx) => ({
...route,
selected: idx === index,
})),
}));
};
renderTabBar = props => {
const { routes } = this.state;
this.handleStateIndexChange(); // HERE I GET THE ERROR
return (
<View style={tabViewStyles.tabBar}>
{props.navigationState.routes.map((route, i) => {
return (
<>
<TouchableOpacity
key={route.key}
style={[
tabViewStyles[`tabStyle_${i}`],
]}
onPress={() => this.setState({ index: i })}
>
<Text>
{route.title}
</Text>
// THE FUNCTION ATTEMPTS TO SHOW AN ELEMENT WHEN
// THE INDEX OF A ROUTE IS selected true
{routes[i].selected && (
<View
style={{
flex: 1,
}}
>
<View
style={{
transform: [{ rotateZ: '45deg' }],
}}
/>
</View>
)}
</TouchableOpacity>
</>
);
})}
</View>
);
};
renderScene = SceneMap({
first: this.props.FirstRoute,
second: this.props.SecondRoute,
});
render() {
return (
<TabView
navigationState={this.state}
renderScene={this.renderScene}
renderTabBar={this.renderTabBar}
onIndexChange={this.handleIndexChange}
/>
);
}
}
Full error:
Invariant Violation: Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
This is the function giving the error:
handleStateIndexChange = () => { // FUNCTION WITH THE ERROR
const { index } = this.state;
this.setState(({ routes }) => ({
routes: routes.map((route, idx) => ({
...route,
selected: idx === index,
})),
}));
};
All I need is to set the state of selected to true so I can toggle the visibility of a component.

As stated in the comment above, you cannot call setState directly inside your render function.
I do not see any reason to keep the selected value in your state as it only depends on another value already in it, this information is redundant.
You should remove selected from all your objects in routes and change your JSX condition :
{routes[i].selected &&
To the following :
{i === this.state.index &&
To produce the same result.
You can now remove handleStateIndexChange from your code

Because of the way React will batch state updates, if you need to set state based off previous state, you should do all the destructuring in the callback:
handleStateIndexChange = () => {
this.setState(({ index, routes }) => ({
routes: routes.map((route, idx) => ({
...route,
selected: idx === index,
})),
}));
};
Also, as #Adeel mentions, you should not call this.setState from inside the render execution context. Move that call the componentDidUpdate instead.

Calling setState in render is the actual reason for infinite rerender loop,
because setting state calls rerender, which calls another setState which calls another rerender etc.
So I would suggest to move the setState part into componentDidUpdate and control it there. Here is the approximation of what I mean with little changes to describe the point.
class App extends React.Component {
state = {
index: 0,
routes: [
{
key: "first",
title: "Drop-Off",
selected: true
},
{
key: "second",
title: "Pick up",
selected: false
}
]
};
componentDidUpdate(_, prevState) {
if (prevState.index !== this.state.index) {
this.handleStateIndexChange();
}
}
handleIndexChange = () => {
const randomIndexBetweenZeroAndOne = (Math.random() * 100) % 2 | 0;
this.setState({
index: randomIndexBetweenZeroAndOne
});
};
getMappedRoutes = (routes, index) =>
routes.map((route, idx) => ({
...route,
selected: idx === index
}));
handleStateIndexChange = () => {
this.setState(({ routes, index }) => ({
routes: this.getMappedRoutes(routes, index)
}));
};
render() {
const { routes } = this.state;
return (
<>
<button onClick={this.handleIndexChange}>Change Index</button>
{this.state.routes.map(JSON.stringify)}
</>
);
}
}