Answer the question
In order to leave comments, you need to log in
Why is the state updated normally, but something else is being rendered?
I can't figure out what the problem is. I subscribed to update the state and when sorting / deleting an element in the console, I display the current state with subscribe. State is normally sorted. Just as I wanted, but on the screen everything is not so. Where am I wrong?
sortColumn(e) {
this.props.onSortColumn(e);
}
render(){
return (
{this.props.studentsStore.studentsList.map((item, index) =>
<tr className="itemStudent" key={index}>
<td><input type="text" defaultValue={item.name} /></td>
<td><input type="text" defaultValue={item.surname} /></td>
<td>{item.gender}</td>
<td><input type="text" defaultValue={item.age} /></td>
<td>{item.isMarried + ''}</td>
<td><button id="remove" onClick={() => this.removeStudent(index)}>X</button></td>
</tr>
)}
)
}
export default connect(
state => ({
studentsStore: state
}),
dispatch => ({
onSortColumn: (event) => {
dispatch({ type: 'SORT_STUDENT', payload: event.target })
}
}
})
)(App);
const initialState = [
{
name: 'Bill',
surname: 'Tomes',
gender: 'male',
age: 22,
isMarried: true,
},
{
name: 'Hanna',
surname: 'Morton',
gender: 'female',
age: 21,
isMarried: false,
}
];
export default function studentsList(state = initialState, action) {
if(action.type === 'ADD_STUDENT') {
return [
...state,
action.payload
]
}
if(action.type === 'SORT_STUDENT') {
function sortArr(a,b) {
return a.age-b.age;
}
let newArr = state.slice();
if(action.payload.id === 'titleAge') {
newArr.sort(sortArr);
}
return newArr
}
return state;
}
Answer the question
In order to leave comments, you need to log in
what is going on anyway? how does it work?
i don't like return newArr
try return [...newArr]
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question