React with Typescript defaultProps an array of object

Question

I am trying to setup a defaultProps for some field of an array of object prop.

interface IProps {
  steps: Array<{
    id: number | string
    route?: string
    label?: string
    completed?: boolean
    disabled?: boolean
    active?: boolean
  }>
}


class Stepper extends React.Component<IProps, {}> {
  static defaultProps: IProps = {
    steps: ???
  }
  render() {
    return <div></div>
  }
}

I tried to look up online but I couldn't find a way of setting defaultProps for my case.

I would like to set some default value only for completed, disabled and active and leave the other as they are.

Is there an easy way to do this ?

Probably, declare interface ISomeOfIProps with completed, disabled and active members. And define defaultProps: ISomeOfIProps? :) — Sasha
– Sasha, Commented Sep 24, 2018 at 14:00
I am a bit new in Typescript with React (coming from JS only), would you mind setting up an example for me ? I would greatly appreciate ! — SuperMarco
– SuperMarco, Commented Sep 24, 2018 at 14:03

Sasha · Accepted Answer · 2018-09-24 14:53:26Z

3

I'd extract interface IStep, and split it into partial and complete one:

interface IPartialStep {
  completed?: boolean
  disabled?: boolean
  active?: boolean
}

interface IStep extends IPartialStep {
  id: number | string
  route?: string
  label?: string
};

So, now it's logical to use 2 components: Step list (Stepper) and Step Item (Step):

interface IProps {
  steps: Array<IStep>
}

class Stepper extends React.Component<IProps, {}> {
  // actually, default props are moved to Step
  // so this one probably not needed.
  static defaultProps: IProps = {
    steps: []
  }
  render() {
    return this.props.steps.map(step => <Step {...step}/>);
  }
}

class Step extends React.Component<IStep> {
  static defaultProps: IPartialStep = {
    // here you can define default props for step item
    completed: false,
    disabled: false,
    active: false,
  }
  render() {
    const {id, route, ...} = this.props;
    // here you define how to display every step
    return <div>{id}</div>
  }
}

Hope it helps.

edited Sep 24, 2018 at 14:53

answered Sep 24, 2018 at 14:40

Sasha

5,9441 gold badge22 silver badges38 bronze badges

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

1 Comment

SuperMarco Over a year ago

Amazing, this is exactly what I needed ! Now I know that I need to split my component when I come across case like this ! Thanks for the help!

Collectives™ on Stack Overflow

React with Typescript defaultProps an array of object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related