score:6
you are mutating the original state
. dont mutate the state, and use setstate
to rerender the ui.
addtolist() {
let k = [...this.state.alltasks];
k.push(this.state.inputvalue);
this.setstate({alltasks: k})
}
or
addtolist() {
this.setstate({alltasks: [...this.state.alltasks, this.state.inputvalue]})
}
directly changing the state does not rerender the ui. you should avoid mutating state directly. also using setstate
to update the state will rerender the ui.
let k = [...this.state.alltasks];
creates a new array, and then we push a value to k
. so in this case we are not mutating the state directly. instead we are changing a newly created array. after that we are using setstate
to set the state
which will update the ui.
score:-1
here goes your answer:
class app extends component {
constructor(props) {
super(props);
this.state = {
inputvalue: '',
alltasks: []
};
this.addtolist = this.addtolist.bind(this);
}
addtolist(e) {
if( e && e.preventdefault ) e.preventdefault();
this.setstate({
alltasks: [...this.state.alltasks, this.state.inputvalue]
});
}
render() {
return (
<div>
<h1>کار های خود را مدیریت کنید !</h1>
<input type="text" placeholder="کار خود را بنویسید ..." value={this.state.inputvalue} onchange={ event => this.setstate({ inputvalue: event.target.value }) } />
<button onclick={ e => this.addtolist(e) }>ثبت کردن</button>
<hr />
<ul>
{
this.state.alltasks.map(task => {
return <li>{ task }</li>;
})
}
</ul>
</div>
);
}
}
here this.setstate updates the state and [...alltasks, this.state.inputvalue] appends the inputvalue to the array of alltasks. the changing in state makes the component rerender it and hence the updated value will be visible in your list.
Source: stackoverflow.com
Related Query
- Why map function in ES6 is not refreshed?
- React why is this simple array map function not returning anything?
- Why does iterating through an ES6 Map not create any children elements in ReactJS?
- Why does moving the array map of props outside the render function not work in React?
- Why do i keep getting typeerror: not a function while trying to filter or map an array
- why my map function is not working to display API data on browser?
- why I get this error: map is not a function
- Why am I not getting a re-render, when using map function to list components?
- Why react map function is not working properly?
- Why do I need to use this in ES6 map function
- Why is map function not working as expected? ReactJS
- Why this map function is receiving object not string in react. I need to use item.item to render a string
- react-testing-library why is toBeInTheDocument() not a function
- React - useState - why setTimeout function does not have latest state value?
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- React.memo - why is my equality function not being called?
- map function not working in React
- Why mapStateToProps and mapDispatchToProps are not just one function in Redux?
- Why is this returning the error .contains() is not a function
- Why can I not use a variable as parameter in the require() function of node.js (browserify)?
- Why do componentWillUpdate() and componentWillMount() not trigger render function when setState used in these methods?
- why I can not use function keyword to define a function inside a reactjs class
- Why is only the last item in a map function being changed in react app?
- React - State Hook map is not a function
- React - State Hook map is not a function
- In React why does calling a function from another function in our code not work and display?
- Why does react call render function if I have not changed the reference of the state?
- Why react calls function in subcomponents event when this subsomponents not rendered?
- React - Adding component in Map function not adding
- react: using es6 component in ts component: ts2605: jsx element type 'yyy' is not a constructor function for jsx elements
More Query from same tag
- Remove current array element from Redux array
- Best way to implement Permission for each element in React component
- How to read file using FileReader.readAsText synchronously in JavaScript?
- Material UI: Style nested components in TablePagination
- How to pass props from one component to an another component in WeChat Mini-Program
- Toggle through Reactjs Mapped Array
- How to render a component in React without putting it in a render() method?
- Cannot read Property of undeifned Cards material ui
- Is there a way to make separate files for components such as logic, html and CSS in ReactJS like Angular?
- In reactjs, On hover a row of the table should change background of row of other table with same row index value
- How to use Masonry.js and React.js?
- Word is not getting added until the page is refreshed in TableItem component in React
- how can I group array of values inside of an object to another array of object
- React & Progressbar.js: Custom shaped progress circle
- How setState with one value work?
- TypeScript: excess properties are not checked in lambdas without explicit return type
- Mutating props in React
- How to show a modal dialog in React using bootstrap
- Unable to execute JS call: __fbBatchedBridge is undefined
- Pass props to React component dependent on route
- Directly import next.js API endpoint in getServerSideProps()
- Call and store data from a API in React Reducer
- Is it possible to get the current length of an array stored in state inside an interval running in useEffect hook?
- Expected corresponding JSX closing tag for input Reactjs
- don't clear input on select using React-Select
- Flaky errors when fetching & rendering data using React Hooks
- React updating state after component has been unmounted (memory leak)
- Is it possible to partially apply a React component?
- How to get onClick Event for a Label in ChartJS and React?
- Why i cant call a hook directly?