I'm using Material UI kit for React.
I'm making Checkboxes dynamically from states and updating them,
But I'm getting uncontrolled element error.
this.state = {
services : [{service: "s1", value: false},
{service: "s2", value: false},
{service: "s3", value: false},
]
};
handleServiceCheck = (i) => {
let services = this.state.services;
services[i].value = !services[i].value;
this.setState({ services: services });
};
this.state.services.map((service, i) => (
<FormControlLabel key={i}
control={
<Checkbox
checked={service.value}
onChange={() => this.handleServiceCheck(i)}
value={service.service}
className={classes.checkBox}
/>
}
label={service.service}
/>
))
There are several problems here.
First of all, the checked prop of Checkbox needs a boolean, but you're passing integers.
Second of all, when mutating a previous state, you shouldn't mutate it in place, you should pass a function to setState that takes the previous state and returns the new one.
handleServiceCheck = (i) => {
this.setState(prevState => ({services:
prevState.services.map((s, idx) => {
return i === idx
? { ...s, value: !s.value }
: s
})
}));
};
Here's a CodeSandbox sample I created with the full fixed working version.
checked={service.value || false}
or
checked={Boolean(service.value)}
Related
In my new project, I am using material UI autocomplete within tabs, and using useImmer hooks for state management. Values in the autocomplete are populated through map function and everything works properly. However, the dropdown functionality is not working after switching the Tabs.
The values are reaching to this component as
const Dropdownlist = ({ defaultRates, value, onChange, index }) => {
return (
<Autocomplete
{...defaultRates}
size="small"
inputValue={value}
value={value}
autoSelect={true}
clearOnEscape={true}
onChange={(event, newValue) => {
onChange( newValue, index );
}}
renderInput={(params) => <TextField {...params} />}
/>
);
};
export default Dropdownlist;
Values of 'defaultRates' was built using
const ratings =
Rates.map((charge) => {
return ({ id: charge.rateid, label: charge.rate });
});
const defaultRates = {
options: ratings,
getOptionLabel: (option) => option.label,
};
Then,
const Rates = [
{
rateid: 101,
rate:"10"
},
{
rateid: 102,
rate:"30"
},
{
rateid: 103,
rate:"1"
},
{
rateid: 104,
rate:"2"
},
];
export default Rates;
Finally, On Change functionality
const onChange = (e,i) => {
let newState;
if(e)
{
const { id, label } = e;
newState = transactions.map((item, index) => {
var tds = (label/100)*item.amount;
if (index === i) {
return {
id: item.id,
transaction: item.transaction,
amount: item.amount,
name: item.name,
type: item.type,
ts:item.ts,
tr:label,
tds: tds,
error:false,
};
} else {
return item;
}
});
setTransactions(newState);
}
}
In the first tab I have many autocomplete dropdown and the selected values are also using in the second tab. If I switch to Tab2 and return back to Tab1, I can see the selected values there. But If I want to change the selected value, nothing happens while clicking the dropdown icon. Please let me know if anyone ever experienced in this context. Would like to know if I using Material UI autocomplete parameters in the right way?
I have gone through Material UI documentation and Autocomplete params. Please advise if it is a state management issue or Mat UI bug?
How can useEffect detect the change in an array's object's property
without knowing the state array size because items may be added dynamically
in this particular case the "price" property in one of the objects
The array is a state
Just for example if changing the price property useEffect won't invoke, price will be the same next time (after - localStorage.getItem)
(In my app I change it dynamically in a different way this is for example).
const checkUseEffectLocalS = () => {
array[0]['Price'] = '12';
setItemsArray(array);
};
return (
<>
<div>
<button
onClick={() => checkUseEffectLocalS()}>
Check
</button>
</>
);
useEffect(() => {
localStorage.setItem(userItems, JSON.stringify(array));
}, [array.map((item) => item.price)]); //Tried this way also but it didn't worked
Niether
useEffect(() => {
localStorage.setItem(userItems, JSON.stringify(array));
}, [array]); // won't work
The array structure
array([
{
id: 1,
productName: 'Vitamin',
price: '10$',
},
{
id: 2,
productName: 'Powder',
price: '26$',
},
{
id: 3,
productName: 'Multivitamin',
price: '17.5$',
},
]);
Before asking I checked very similar question but with no real answer - stackoverflow
Thanks in advance.
Without using useEffect
const checkUseEffectLocalS = () => {
let arr= [...array]
arr[0]['Price'] = '12';
localStorage.setItem(userItems, JSON.stringify(arr))
setItemsArray(prev=>arr);
};
return (
<>
<div>
<button
onClick={() => checkUseEffectLocalS()}>
Check
</button>
</>
)
By using useEffect
useEffect(() => {
localStorage.setItem(userItems, JSON.stringify(array))
}, [JSON.stringify(array)])
I'm new to React JS (and JS, in general). Now I'm trying to code a simple task tracker.
So, I have all tasks in state element of MyTodoList class. There I draw each task separately with Task constant.
I want to implement adding a new task with 2 inputs: name and description.
I do it in MyTodoList with creating a new object (newTask), so that I can add it to state list later. However, I guess that I'm writing onChange method for input incorrectly. newTask seems to be updating inside the function (logged it in console), but it does not change outside (in input space there are no changes with typing). Obviously I cannot use setState as I want to update a non-state object (object is mutable, so I do not understand why it won't change).
I'm not sure whether I'm updating the object wrongly or whether my whole concept of adding new task is wrong. Would be grateful if you could explain me my mistakes.
Here's the code:
const TaskAdd = ({value, onChange, placeholder, name}) => {
return (
<input value={value} onChange={onChange} placeholder={placeholder} name={name}/>
)
}
const Task = ({id, name, description, completed}) => {
const handleClick = () => {
}
return (
<div className='task'>
<h3>{name}</h3>
<div>{description}</div>
<div>{completed}</div>
<button onClick={handleClick} className='button1'>CLICK</button>
</div>
)
}
class MyTodoList extends React.Component {
state = {
tasks: [
{
id: 1,
name: 'Walk the dog',
description: 'Have to walk the dog today',
completed: false,
},
]
}
maxId = this.state.tasks[this.state.tasks.length - 1].id;
newTask = {
id: this.maxId,
name: '',
description: '',
completed: false,
}
handleChange = (event) => {
const {value, name} = event.currentTarget
this.newTask[name] = this.newTask[name] + value
}
render () {
return(
<div>
<header><h1>TO-DO</h1></header>
<div className='addTask'>
<h2>Let's add something new</h2>
<TaskAdd value={this.newTask.name} onChange={this.handleChange}
placeholder='Name' name='name'/>
<TaskAdd value={this.newTask.description} onChange={this.handleChange}
placeholder='Description' name='description'/>
<p> {this.newTask.name}</p>
<button className='button1'><h3>Add</h3></button>
</div>
<div>{this.state.tasks.map(task => <Task id={task.id} name={task.name}
description={task.description} completed={task.completed}/>)}
</div>
</div>
)
}
}
const App = () => {
return (
<MyTodoList />
)
}
export default App;
Obviously I cannot use setState as I want to update a non-state object
If you want the screen to update you have to use state. The setState function is the only* way to tell react that something change and it needs to rerender.
So, expand your state to have new task in it:
state = {
tasks: [
{
id: 1,
name: 'Walk the dog',
description: 'Have to walk the dog today',
completed: false,
},
]
newTask: {
id: 2,
name: '',
description: '',
completed: false,
}
}
With that you'll need to update your render function to access it in state, as in:
<TaskAdd
value={this.state.newTask.name}
onChange={this.handleChange}
placeholder='Name'
name='name'
/>
And then when you set state, make a copy instead of mutating:
handleChange = (event) => {
const {value, name} = event.currentTarget
this.setState({
newTask: {
...this.state.newTask,
[name]: this.state.newTask[name] + value
}
});
}
Your code didn't include an implementation for the add button, but when you do, you'll probably take this.state.newTask and add it to the end of this.state.tasks (you'll make a copy of the array, not mutate it), and then create a new object to replace this.state.newTask
*ok, technically there's forceUpdate, but don't use that.
I have a group of 3 checkboxes and the main checkbox for checking those 3 checkboxes.
When I select all 3 checkboxes I want for main checkbox to become checked.
When I check those 3 checkboxes nothing happens but when I then uncheck one of those trees the main checkbox becomes checked.
Can someone explain to me what actually is happening behind the scenes and help me somehow to solve this mystery of React state? Thanks!
Here is a code snnipet:
state = {
data: [
{ checked: false, id: 1 },
{ checked: false, id: 2 },
{ checked: false, id: 3 }
],
main: false,
}
onCheckboxChange = id => {
const data = [...this.state.data];
data.forEach(item => {
if (item.id === id) {
item.checked = !item.checked;
}
})
const everyCheckBoxIsTrue = checkbox.every(item => item === true);
this.setState({ data: data, main: everyCheckBoxIsTrue });
}
onMainCheckBoxChange = () => {
let data = [...this.state.data];
data.forEach(item => {
!this.state.main ? item.checked = true : item.checked = false
})
this.setState({
this.state.main: !this.state.main,
this.state.data: data,
});
}
render () {
const checkbox = this.state.data.map(item => (
<input
type="checkbox"
checked={item.checked}
onChange={() => this.onCheckboxChange(item.id)}
/>
))
}
return (
<input type="checkbox" name="main" checked={this.state.main} onChange={this.onMainCheckBoxChange} />
{checkbox}
)
I can't make a working code snippet based on the code you provided, one of the issues was:
const everyCheckBoxIsTrue = checkbox.every(item => item === true);
where checkbox is not defined.
However, I think you confused about using the old state vs the new state, it'd be simpler to differentiate if you name it clearly, e.g.:
eventHandler() {
const { data } = this.state; // old state
const newData = data.map(each => ...); // new object, soon-to-be new state
this.setState({ data }); // update state
}
Here's a working example for your reference:
class App extends React.Component {
state = {
data: [
{ checked: false, id: 1 },
{ checked: false, id: 2 },
{ checked: false, id: 3 }
],
main: false,
}
onCheckboxChange(id) {
const { data } = this.state;
const newData = data.map(each => {
if (each.id === id) {
// Toggle the previous checked value
return Object.assign({}, each, { checked: !each.checked });
}
return each;
});
this.setState({
data: newData,
// Check if every checked box is checked
main: newData.every(item => item.checked === true),
});
}
onMainCheckBoxChange() {
const { main, data } = this.state;
// Toggle the previous main value
const newValue = !main;
this.setState({
data: data.map(each => Object.assign({}, each, { checked: newValue })),
main: newValue,
});
}
render () {
const { data, main } = this.state;
return (
<div>
<label>Main</label>
<input
type="checkbox"
name="main"
// TODO this should be automatically checked instead of assigning to the state
checked={main}
onChange={() => this.onMainCheckBoxChange()}
/>
{
data.map(item => (
<div>
<label>{item.id}</label>
<input
type="checkbox"
checked={item.checked}
onChange={() => this.onCheckboxChange(item.id)}
/>
</div>
))
}
</div>
);
}
}
ReactDOM.render(
<App />
, document.querySelector('#app'));
<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="app"></div>
Side note: You might want to consider not to use the main state
You shouldn't be storing state.main to determine whether every checkbox is checked.
You are already storing state that determines if all checkboxes are checked, because all checkboxes must be checked if every object in state.data has checked: true.
You can simply render the main checkbox like this:
<input
type="checkbox"
name="main"
checked={this.state.data.every(v => v.checked)}
onChange={this.onMainCheckBoxChange}
/>;
The line this.state.data.every(v => v.checked) will return true if all of the checkboxes are checked.
And when the main checkbox is toggled, the function can look like this:
onMainCheckBoxChange = () => {
this.setState(prev => {
// If all are checked, then we want to uncheck all checkboxes
if (this.state.data.every(v => v.checked)) {
return {
data: prev.data.map(v => ({ ...v, checked: false })),
};
}
// Else some checkboxes must be unchecked, so we check them all
return {
data: prev.data.map(v => ({ ...v, checked: true })),
};
});
};
It is good practice to only store state that you NEED to store. Any state that can be calculated from other state (for example, "are all checkboxes checked?") should be calculated inside the render function. See here where it says:
What Shouldn’t Go in State? ... Computed data: Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within render(). For example, if you have an array of list items in state and you want to render the count as a string, simply render this.state.listItems.length + ' list items' in your render() method rather than storing it on state.
I am trying to keep track of which boxes are checked in my local state(you can check multiple boxes). I want to be able to check and uncheck the boxes and keep track of the ids of the boxes that are checked. I will do something with the values later. This is what I have so far:
import React, { Component } from 'react'
import './App.css'
import CheckBox from './CheckBox'
class App extends Component {
constructor(props) {
super(props)
this.state = {
fruits: [
{id: 1, value: "banana", isChecked: false},
{id: 2, value: "apple", isChecked: false},
{id: 3, value: "mango", isChecked: false},
{id: 4, value: "grape", isChecked: false}
],
fruitIds: []
}
}
handleCheckChildElement = (e) => {
const index = this.state.fruits.findIndex((fruit) => fruit.value === e.target.value),
fruits = [...this.state.fruits],
checkedOrNot = e.target.checked === true ? true : false;
fruits[index] = {id: fruits[index].id, value: fruits[index].value, isChecked: checkedOrNot};
this.setState({fruits});
this.updateCheckedIds(e);
}
updateCheckedIds = (e) => {
const fruitIds = [...this.state.fruitIds],
updatedFruitIds= fruitIds.concat(e.target.id);
this.setState({updatedFruitIds});
}
render() {
const { fruits } = this.state;
if (!fruits) return;
const fruitOptions = fruits.map((fruit, index) => {
return (
<CheckBox key={index}
handleCheckChildElement={this.handleCheckChildElement}
isChecked={fruit.isChecked}
id={fruit.id}
value={fruit.value}
/>
);
})
return (
<div className="App">
<h1>Choose one or more fruits</h1>
<ul>
{ fruitOptions }
</ul>
</div>
);
}
}
export default App
So basically I am able to check and uncheck the boxes, but I cannot seem to update and store the fruitIds. Here is my checkbox component also:
import React from 'react'
export const CheckBox = props => {
return (
<li>
<input key={props.id}
onChange={props.handleCheckChildElement}
type="checkbox"
id={props.id}
checked={props.isChecked}
value={props.value}
/>
{props.value}
</li>
)
}
export default CheckBox
Also if you have a cleaner ways to do this than the way I am doing it, I would love to see it.
This is what if I were to approach it I will do. I will create a one dimensional array that holds the id's of the fruits when A fruit if clicked(checked) I will add it id to the array and when its clicked the second time I check if the array already has the id I remove it. then the presence of id in the array will mean the fruit is checked otherwise its not checked So I will do something like below
this.state={
fruitsIds: []
}
handleCheckChildElement=(id) => {
//the logic here is to remove the id if its already exist else add it. and set it back to state
const fruitsIds = this.state.fruitsIds;
this.setState({fruitsIds: fruitsIds.contains(id) ? fruitsIds.filter(i => i != id) : [...fruitsIds, id] })
}
then I render the checkboxes like
<CheckBox key={index}
handleCheckChildElement={this.handleCheckChildElement}
isChecked = { this.state.fruitsIds.contains(fruit.id)}
id={fruit.id}
/>
This is because you can always use the id to get all the other properties of the fruit so there is absolutely no need storing them again.
then the checkbox component should be as follows
export const CheckBox = props => {
return (
<li>
<input key={props.id}
onChange={() => props.handleCheckChildElement(props.id)}
type="checkbox"
id={props.id}
checked={props.isChecked}
value={props.value}
/>
{props.value}
</li>
)
}
The reason you are not getting your ids updated because:
You are trying to concat a non array element to an array.
concat is used for joining two or more arrays.
updatedFruitIds = fruitIds.concat(e.target.id);
You are not updating your actual fruitIds state field. I dont know why you are using "updatedFruitIds" this variable but due to above error it will always result into a single element array.
this.setState({ updatedFruitIds });
updateCheckedIds = e => {
const fruitIds = [...this.state.fruitIds],
updatedFruitIds = fruitIds.concat([e.target.id]);
this.setState({ fruitIds: updatedFruitIds });
};
OR
updateCheckedIds = e => {
const fruitIds = [...this.state.fruitIds, e.target.id],
this.setState({ fruitIds });
};