Boris K
Boris K

Reputation: 3580

Mapping an array from props in a connected React component

I have a connected React component pulling into props from Redux state.

It is getting an array of objects called plots, like this:

function mapStateToProps(state) {
    return {
        plots: state.plots.plots
    };
}

I want to map some properties of plots into arrays.

Making this call inside the render method works fine:

render() {
        if (this.props.plots) {
            console.log(this.props.plots.map(a => a.variety));
        }...
}

Defining this method outside the class declaration and calling it inside the render method returns undefined:

const varieties = props => {
    if (props.plots) {
        props.plots.map(a => a.variety);
    }
};

render() {
        if (this.props.plots) {
            console.log(varieties(this.props);
        }
}

Anyone know what I'm missing?

Upvotes: 0

Views: 560

Answers (1)

dalinarkholin
dalinarkholin

Reputation: 76

Easy fix.

You are missing a return statement.

const varieties = props => {
    if (props.plots) {
        return props.plots.map(a => a.variety);
    }
};

Upvotes: 1

Related Questions