18 Feb 2022

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) {

 this.setState({ arrayData : arrayData .filter(b => b.key === });



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








18 Feb 2022

Best Answer

best answer

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) {

		setStatearrayData(arrayData.filter(b => b.key ===;


function mapStateToProps(state) {
 return {
 arrayData: state.arrayData

function mapDispatchToProps(dispatch) {

export default connect(mapStateToProps, mapDispatchToProps)(Sample);

© 2024 Copyrights reserved for