React - Redux - Only some data is displayed

Question

I'm sure this is a simple question, but actually I can't figure out, why it is not working. I'm still in beginner with react-redux, so please be patient with me. ;-)

I'm loading different data with react-redux. Now I want to fill a select box with the loaded values.

I can see the data is loaded correctly (props.anreden & props.benutzer). So I can be sure that the data is loaded correctly and I have error somewhere else.

The difference is that anreden is an obejct-array, while benutzer is an object.

When I want to fill the select box in the render() method, it fills only the data of benutzer and not of anreden:

This is the code of this part:

<div className="select">
    <select
        value={0}                
        className={`form-control tabable`}
    >
        <option value={0}>auswählen</option>
        <option value={this.props.benutzer.id}>{this.props.benutzer.vorname}</option>
        {this.props.anreden && this.props.anreden.length > 0 &&
        this.props.anreden.map((option) => {
            return (<option value={option.id}>{option.bezeichnung}</option>)
        })}
    </select>
</div>

Does anyone have a hint for me, why it is like this?

Are you including all those redux state values in mapStateToProps? — cullanrocks
– cullanrocks, Commented Sep 4, 2019 at 19:34
this.props.anreden are you sure its an array, you can verify using console.log — Rikin
– Rikin, Commented Sep 4, 2019 at 19:35
It is not related to Redux. Also provide what console says. Probably because you did not provide key attribute <option value={option.id} key={option.id}>{option.bezeichnung}</option> — Talgat Saribayev
– Talgat Saribayev, Commented Sep 4, 2019 at 19:37

Yury Tarabanko · Accepted Answer · 2019-09-04 19:36:40Z

3

It looks like this.props.anreden is an Object, not an array as you expect it to be. So this.props.anreden.length > 0 is always false.

Map over values. Also you need keys.

{this.props.anreden && 
    Object.values(this.props.anreden).map((option) => {
        return (<option value={option.id} key={option.id}>{option.bezeichnung}</option>)
    })}

answered Sep 4, 2019 at 19:36

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yury Tarabanko Over a year ago

@dns_nx Glad I could help :)

Collectives™ on Stack Overflow

React - Redux - Only some data is displayed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related