I'm trying to access different indexes of an array to display in one of my components, but I'm having trouble. This is the code I'm using at the moment:
const mapStateToProps = (state) => {
return {
weight: state.move[0].movementWeight,
name: state.move[0].movementName
}
};
Here is the code for the button the user clicks which determines what index is needed:
const MovementButton = (props) => {
const classes = useStyles();
const mapNames = props.name.map((lift) => {
return (
<Button
key={lift.movementName}
className={classes.movementButtons}
onClick={() => history.push(`/movement/${lift.movementName}/${lift.movementWeight}`)}
>
{lift.movementName} - {lift.movementWeight}lbs
</Button>
)
});
const displayMovementButtons = () => {
if (mapNames.length === 0) {
return <div className={classes.noMovementsMessage} >Click add button to begin</div>
};
return <div>{mapNames}</div>
};
return <div className={classes.movementButtonsDiv}>{displayMovementButtons()}</div>
};
const mapStateToProps = (state) => {
return {
name: state.move
}
};
export default connect(mapStateToProps)(MovementButton);
But this makes props.weight always how the 0 index, whereas sometimes I need index 1, 2, etc. The reason I'm using the [0] is because without it, I get undefined. Any help?