mapStateToProps accessing different indexes of an array

52 views Asked by At

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?

0

There are 0 answers