nico
Published in : 2022-02-18

How to update the props property of type array after filtering in one functionnal component

React js

Hello I need to filter props.arrayData with filtering in one functionnal component

export function BurnSegments({ arrayData }) { function handleChange(event) { event.preventDefault(); this.setState({ arrayData : arrayData .filter(b => b.key === event.target.value) }); }

 

But setState is undefined, so what is the proper way of changing arrayData in the props?

Thanks

 


 

 

 

Comments

nico Date : 2022-02-18

Best answers

4

Best answers

4

I made it work by using the useState of the functional component as we can't update props.

with the steps:

 

  • create a State with useState in the functional component called statearrayData (to distinct it from the props called arrayData)
  • in the useEffect : update the state with the props arrayData by using setStatearrayData ==> triggered on the first render and when redux state is updated
  • in the handleChange we also use setStatearrayData ==> we can filter the props and update the component state
     

By the way I used redux here

export function Sample({ arrayData}) { const [statearrayData , setStatearrayData ] = useState([]); useEffect(() => { // we update here the state with the prop setStatearrayData (arrayData); }, [arrayData]); function handleChange(event) { event.preventDefault();setStatearrayData(arrayData.filter(b => b.key === event.target.value)); }}function mapStateToProps(state) { return { arrayData: state.arrayData };}function mapDispatchToProps(dispatch) { ....}export default connect(mapStateToProps, mapDispatchToProps)(Sample); 

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

[solved] Version code 1 has already been used React native
Publish date: 2023-03-13 | Comments: 1

Tag: React js

How to implement SSO with React and ASP.NET Core Web API ?
Publish date: 2022-11-03 | Comments: 0

Tag: React js

[Solved] Cannot read properties of null (reading 'getBoundingClientRect')
Publish date: 2021-12-02 | Comments: 2

Tag: React js

How to use SetFieldValue from outside render function? Formik
Publish date: 2021-07-03 | Comments: 2

Tag: React js

TypeError: Cannot read properties of null (reading 'scrollTop') in jest
Publish date: 2022-09-08 | Comments: 1

Tag: React js