CODEWITHSUNDEEP
javascriptreactjsreact-select
RamAlx
RamAlx

Reputation: 7334

React Select does not show the value when selected

i'm new to react-redux and i'm having two issues. I'm using eract select plus like this:

<Select
          id="portf"
          options={opts}
          onChange={value => portfolioSelector(value)}
          placeholder="Select Portfolio"
        />

But when i select another value this value even though is triggered it is not shown it the field. Another issue is that i want to set initial value to my selector so in my container i write:

const initialValues = fromJS({
  market: { label: 'All', value: 'All' },
  prodType: { label: 'All', value: 'All' }
});

When i execute my project i can see that in the state these values do exist but the don't shown in my select field. For the second case i use react-select in redux form and i have implement it with the following way:

<Select
    {...props}
    value={props.input.value}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />

Upvotes: 2

Views: 6596

Answers (1)

Max von Hippel
Max von Hippel

Reputation: 2970

I just dealt with this problem, and I found it helpful to somewhat abstract the Select into its own component. To do this, you can make a component (ReactReduxSelect.jsx) that looks like this:

import React from 'react';
import Select from 'react-select';
import style from 'react-select/dist/react-select.css';

// define portfolioSelector somehow
// or you could pass it as a property:
//     portfolioSelector: React.PropTypes.func

class ReactReduxSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <Select
                name={this.props.name}
                value={this.state.selected}
                options={this.props.options}
                onChange={(value) => { 
                    this.setState({ selected: value });
                    portfolioSelector(value);
                }}
                placeholder={this.props.placeholder}
            />
        );
    }
}

ReactReduxSelect.propTypes = {
    name: React.PropTypes.string,
    placeholder: React.PropTypes.string,
    options: React.PropTypes.array
};

export default ReactReduxSelect;

The cool thing about implementing it this way is that it then can be updated within the native Redux state tree. So if you go back to your page where you want to embed this control (MyTotallySickReactReduxWebpage.jsx or whatever), you can import the component ...

import ReactReduxSelect from './ReactReduxSelect';

And then embed it in your code ...

const ArtifactGenerator = ({
    // my totally awesome props
}) => (
    // some react redux stuff w/ divs and { and js and all that jazz
    <ReactReduxSelect
        name="portf"
        options={[
             { label: 'Market', value: 'All' },
             { prodType: { label: 'ProdType', value: 'All' }
        ]}
        placeholder="Select Portfolio"
     />
     // whatever other groovy code you want in there
);

// the rest of your props and export code or whatever for the page

I'm not totally sure what you were trying to do with your initialValues there, that syntax doesn't look right to me, so I just kind of wrote something I think is more likely to work, but you can fairly easily adjust this to fit your needs. Hope this helps!

Upvotes: 1

Related Questions