TypeScript Property 'selected' does not exist on type '{ id: string; value: string; label: string; color: string; }'.ts(2339)

Question

I am using TypeScript with react native and when I write my code I got an error which is Property 'selected' does not exist on type '{ id: string; value: string; label: string; color: string; }'.ts(2339) and Type 'string' is not assignable to type '{ id: string; value: string; label: string; color: string; } | undefined'.ts(2322)

my code is:

export default class Instant extends Component {

  state = {
    one: [

      {
        id: "a0",
        value: "a0",
        label: 'A0',
        color: 'grey',
        checked: false,
      },
      {
        id: "a1",
        value: "a1",
        label: 'A1',
        color: 'grey',
        checked: false,
      },
      {
        id: "a2",
        value: "a2",
        label: 'A2',
        color: 'grey',
        checked: false,
      },
      {
        id: "a3",
        value: "a3",
        label: 'A3',
        color: 'grey',
        checked: false,
      },
      {
        id: "a4",
        value: "a4",
        label: 'A4',
        color: 'grey',
        checked: false,
      },
      {
        id: "a5",
        value: "a5",
        label: 'A5',
        color: 'grey',
        checked: false,
      },
    ],
    data: [
      {
        id: "Normal",
        value: "normal",
        label: 'normal',
        color: 'grey',
      },
      {
        id: "Gloss",
        value: "gloss",
        label: 'gloss',
        color: 'grey',
      },
      {
        id: "Strong",
        value: "strong",
        label: 'strong',
        color: 'grey',
      },
      {
        id: "Re-used",
        value: "reused",
        label: 're-used',
        color: 'grey',
      },
    ],
    two: [
      {
        id: "Color",
        value: "color",
        label: 'color',
        color: 'grey',
      },
      {
        id: "Black&White",
        value: "black&white",
        label: 'black and white',
        color: 'grey',
      },
    ],
    three: [
      {
        id: "Two-side",
        value: "twoside",
        label: 'two side',
        color: 'grey',
      },
      {
        id: "One-side",
        value: "oneside",
        label: 'one side',
        color: 'grey',
      },
    ],
  };

  onPress = (data: any) => this.setState({ data });
  render() {
    let selectedButton = this.state.data.find(s => s.selected == true);
    selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;

The final result must be like that, it works fine but it still have an error on VSCode. enter image description here

The objects in your this.state.data do indeed not have a selected property. Are they supposed to? Is it optional? — T.J. Crowder
– T.J. Crowder, Commented Feb 22, 2021 at 12:18
If you're only going to allow selecting one of them, you might consider having a selected state member that you assign the object to, rather than making it a property of the object. — T.J. Crowder
– T.J. Crowder, Commented Feb 22, 2021 at 12:19
it is a code for instant calculation of customer pre-order, this depends on what the customer choose so it a single choice in each option group — royxd
– royxd, Commented Feb 22, 2021 at 12:28

Saghi Shiri · Accepted Answer · 2021-02-22 12:52:55Z

0

You did not define selected property for your object. Define an optional property in your object model. For example:

export interface stateModel {
  id: string;
  value: string;
  label: string;
  color: string;
  checked: boolean;
  selected?: boolean;
}

Or if you can't define a model for your data, you can use type any for state:

 state : any = {...}

ATTENTION:

The any type allows you to assign literally “any” particular value to that variable

edited Feb 22, 2021 at 12:52

answered Feb 22, 2021 at 12:46

Saghi Shiri

6176 silver badges21 bronze badges

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

4 Comments

royxd Over a year ago

I use the second way and then an error appear: in the "e" parameter let selectedButton = this.state.data.find(e => e.selected == true); which is "Parameter 'e' implicitly has an 'any' type."

royxd Over a year ago

Parameter 'e' implicitly has an 'any' type

Saghi Shiri Over a year ago

this means you are using --noImplicitAny. Try this: this.state.data.find(s: any => s.selected == true)

Saghi Shiri Over a year ago

Or add "noImplicitAny": false to "compilerOptions" object in tsconfig.json

Collectives™ on Stack Overflow

TypeScript Property 'selected' does not exist on type '{ id: string; value: string; label: string; color: string; }'.ts(2339)

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related