CODEWITHSUNDEEP
reactjsreact-redux
dns_nx
dns_nx

Reputation: 3943

React - Redux - Only some data is displayed

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.

enter image description here

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:

enter image description here

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?

Upvotes: 0

Views: 56

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

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

Upvotes: 3

Related Questions