0

Let's say I define my props like this in a child component:

type TestProps = {
    testArray: Array<string>,
    number: number
}

function TestComponent(props: TestProps)
{
....
}

and this would be the parent component.

function ParentComponent() {
    return (
        <TestComponent testArray={[1, 2, 3]}/>
        <TestComponent testArray={[1, 2, 3]} number={20}/>
    );
}

For the first JSX element, I'd like to have props.number set to testArray.length. For the second JSX element, I'd like my answer to be set to 20.

I could do something like this:

type TestProps = {
    testArray: Array<string>,
    number?: number
}

function TestComponent(props: TestProps) {
    if(props.number === undefined) {
        props.number = testArray.length;
    }
}

but I don't want that. I want a more elegant solution, somehow setting this directly in TestProps. Something similar to this:

type TestProps = {
    testArray: Array<string>,
    number: number | undefined = testArray.length
}

Is it possible?

Thanks.

Olian04
  • 6,480
  • 2
  • 27
  • 54
Octavian Niculescu
  • 1,177
  • 1
  • 3
  • 24
  • 1
    You should never mutate props, and a type has no functional affect on code so it doesn't make sense (and isn't possible) to do it there. – Brian Thompson Nov 18 '21 at 21:06
  • Does this answer your question? [React - defaultProps vs ES6 default params when destructuring (performances issues)](https://stackoverflow.com/questions/41488537/react-defaultprops-vs-es6-default-params-when-destructuring-performances-issu) – Brian Thompson Nov 18 '21 at 21:06
  • @BrianThompson not really, it was close though :) – Octavian Niculescu Nov 18 '21 at 21:14
  • Since your default is derived from another prop, you'll need to do something like your first example. But you'll need to avoid mutating props and do something like `const number = props.number || props.testArray.length`, and then use `number` instead of `props.number`. – Brian Thompson Nov 18 '21 at 21:16
  • @BrianThompson would you mind giving me a reason on why shouldn't I mutate my props in this case? – Octavian Niculescu Nov 18 '21 at 21:24
  • Because mutating state or props is anti-React. You may not have issues now, but mutations like this can cause skipped re-renders and hard to trace bugs. – Brian Thompson Nov 18 '21 at 21:30
  • @BrianThompson okay - so what would be the best solution in your opinion? – Octavian Niculescu Nov 18 '21 at 21:41
  • 1
    I gave it already. Use a temp variable. What you're asking about isn't really a *default* value as much as it is a *fallback* value. A *default* value would be the same every time, but this *fallback* value changes based on other props. The subtle difference between the two is how cleanly you can set the variable to that value. As far as I'm aware, this is your best option, there is no more elegant way – Brian Thompson Nov 18 '21 at 22:02
  • Okay, thanks. can you add that as an answer? I will accept it – Octavian Niculescu Nov 18 '21 at 22:05

0 Answers0