CODEWITHSUNDEEP
reactjstypescript
Daniel Logvin
Daniel Logvin

Reputation: 502

How to return value in component react typescript

I'm trying to return a value out of a component. Basically what it needs to do is just not being displayed if its turned on {false}.

firstfile.tsx

export default (isDisplayedLoadingTitle: IProps) => (
  <Fragment>
    {isDisplayedLoadingTitle && (
    <ChartLoaderUI.ChartTitleContainer>
      <ChartLoaderUI.ChartTitle>
        <ChartLoaderUI.Title>{`Loading...`}</ChartLoaderUI.Title>
      </ChartLoaderUI.ChartTitle>
    </ChartLoaderUI.ChartTitleContainer>
    )}
    <ChartLoaderUI.Container className={'chart-loader'}>
      <Loader />
    </ChartLoaderUI.Container>
  </Fragment>
);

Having that and in another file

secondfile.tsx

<ChartLoader isDisplayedLoadingTitle={false}/>

How can I modify the returned value on firstfile.tsx?

Thanks in advance for the help.

Upvotes: 0

Views: 302

Answers (1)

John Ruddell
John Ruddell

Reputation: 25872

You're missing the brackets to destructure that property from the object of properties, so currently you are using an object in your boolean comparison. 

export default ({isDisplayedLoadingTitle}: IProps) => (

That will handle your bug of not pointing to the right key (aka it would always show because {isDisplayedLoadingTitle: false} && ( will always be true

Upvotes: 1

Related Questions