CODEWITHSUNDEEP
reactjsreact-reduxreact-redux-form
Meesam
Meesam

Reputation: 109

react redux fill drop down list

i am working on application in which i use react with redux. i am stuck how to fill my dropdown list with data(from api responce). How ever i have work around to fill dropdown list. but i want to know what is the standard way to fill dropdown list using react with redux. Any help will be very great.

I have action.jsx :-
 export const FETCH_PROJECTTYPE="FETCH_PROJECTTYPE";
    export const FETCH_PROJECTTYPE_SUCCESS="FETCH_PROJECTTYPE_SUCCESS";
    export const FETCH_PROJECTTYPE_FAILURE="FETCH_PROJECTTYPE_FAILURE";
    export function fetchProjectType(){
      const request=axios({
        url:`${URL.ROOT_URL}/projecttype`,
        method:'GET',
        Headers:[]
      });
      return{
        type:FETCH_PROJECTTYPE,
        payload:request
      }
    }

    export function fetchProjectTypeSuccess(projectTypes){
      return{
        type:FETCH_PROJECTTYPE_SUCCESS,
        payload:projectTypes
      }
    }

    export function fetchProjectTypeFailure(error){
      return{
        type:FETCH_PROJECTTYPE_FAILURE,
        payload:error
      }
    }
projectReducer.jsx :- 
import {FETCH_PROJECTTYPE,FETCH_PROJECTTYPE_SUCCESS,FETCH_PROJECTTYPE_FAILURE} from '.././actions/project.jsx';

const INITIAL_STATE={
  projectTypeList:{projectTypes:[],error:null,loading:false},
}

export default function (state=INITIAL_STATE, action) {
  let error;
  switch (action.type){
    case FETCH_PROJECTTYPE:
      return {...state,projectTypeList:{projectTypes:[],error:null,loading:true}};

    case FETCH_PROJECTTYPE_SUCCESS:
      return {...state,projectTypeList:{projectTypes:action.payload,error:null,loading:false}};

    case FETCH_PROJECTTYPE_FAILURE:
      error = action.payload || {message: action.payload.message};
      return{...state,projectTypeList:{projectTypes:[],error:error,loading:false}};

    default:
      return state;

  }
}

projectTypeContainer.jsx :- 
import {connect} from 'react-redux';
import {fetchProjectType,fetchProjectTypeSuccess,fetchProjectTypeFailure} from '.././actions/project.jsx';
import SelectOption from '.././components/renderSelectOption.jsx';

const mapStateToProps=(state)=>{
  return{
    projectTypeList:state.projectTypes.projectTypeList
  }
}

const mapDispatchToProps=(dispatch)=>{
  return{
    fetchProjectType:()=>{
      dispatch(fetchProjectType()).then((response)=>{
        !response.error ? dispatch(fetchProjectTypeSuccess(response.payload.data.objdata)):dispatch(fetchProjectTypeFailure(response.payload.data))
      });
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SelectOption);

SelectOption.jsx : - 
import React,{Component} from 'react';
import Select from 'react-select'


export default class SelectOption extends Component{
  constructor(props){
    super(props)
  }

  componentWillMount(){
    this.props.fetchProjectType();
  }

  render(){
    const { projectTypes,error,loading } = this.props.projectTypeList;
     console.log('project type data are ' + JSON.stringify(projectTypes));
     const option=projectTypes.map((item)=>{
     return <option key={item._id} value={item.Title}>{item.Title}</option>
    });

    return(
      <select className="form-control">
        {option}
      </select>
    )
  }
}

Upvotes: 0

Views: 1460

Answers (1)

gor181
gor181

Reputation: 2068

SelectOption should take an array which has n objects with shape as { value, label } (usually select components do so). Therefore you should map the api response to format known to SelectOption.

We cannot know how SelectOption looks like as I do not see you have posted it. Anyhow map the data to format SelectOption expects and it should work.

Upvotes: 1

Related Questions