CODEWITHSUNDEEP
reactjstypescriptreact-select
Josep Ramon Ribera
Josep Ramon Ribera

Reputation: 41

How to implement React Select on TypeScript

im trying to implement React Select on my application, is my first time using it, and i don't know what is happening. When I put the select on the code, my web turns white. I have seen that is easy to implement on JavaScript, but whatever i try on TypeScript doesn't work, and the result is always the same, my page turns white.

Here is the custom component that i'm trying to implement based on React Select:

import React from 'react';
import Select from 'react-select';
import './VehiclePicker.scss';

interface Vehicle {
  id: number,
  make: string,
  model: string,
  year: number
}

interface ArrayObjectSelectState {
  selectedVehicle: Vehicle | null;
}

let state: ArrayObjectSelectState = {
  selectedVehicle: null
}

const vehicles: Vehicle[] = [
  {
    id: 1,
    make: 'Ford',
    model: 'Fiesta',
    year: 2003
  },
.
.
  {
    id: 7,
    make: 'Audi',
    model: 'A4',
    year: 2009
  }
];

export default function VehiclePicker() {
  return (
    <div className="vehicle-picker">
        <Select
          value={state.selectedVehicle}
          getOptionLabel={(vehicle: Vehicle) => vehicle.model}
          getOptionValue={(vehicle: Vehicle) => vehicle.model}
          options={vehicles}
          isClearable={true}
          backspaceRemovesValue={true}
        />
    </div>
  );
}

Upvotes: 4

Views: 14130

Answers (1)

maxencedhx
maxencedhx

Reputation: 91

The documentation of react-select has a Typescript section, maybe you can check it https://react-select.com/typescript#typescript-usage

I edited a bit your code to make it work, but I didn't have a white screen like you describe.

import React from 'react';
import Select from 'react-select';
import './VehiclePicker.scss';

interface Vehicle {
  id: number;
  make: string;
  model: string;
  year: number;
}

interface ArrayObjectSelectState {
  selectedVehicle: Vehicle | null;
}

const vehicles: Vehicle[] = [
  {
    id: 1,
    make: 'Ford',
    model: 'Fiesta',
    year: 2003,
  },
  // I hope that you did let the two dots on purpose
  // .
  // .
  {
    id: 7,
    make: 'Audi',
    model: 'A4',
    year: 2009,
  },
];

export default function VehiclePicker() {
  // I changed the position of the state here, that's how you should use the state in react
  // https://reactjs.org/docs/hooks-state.html#declaring-a-state-variable

  // If you don't need a state you can remove the following line
  const [state, setState] = React.useState<ArrayObjectSelectState>({
    selectedVehicle: null,
  });

  return (
    <div className="vehicle-picker">
      <Select
        // If you don't need a state you can remove the two following lines value & onChange
        value={state.selectedVehicle}
        onChange={(option: Vehicle | null) => {
          setState({ selectedVehicle: option });
        }}
        getOptionLabel={(vehicle: Vehicle) => vehicle.model}
        getOptionValue={(vehicle: Vehicle) => vehicle.model}
        options={vehicles}
        isClearable={true}
        backspaceRemovesValue={true}
      />
    </div>
  );
}

Upvotes: 2

Related Questions