Using an object as parameter in a React Function Component

Question

I wasn't able to find an answer for this. I'm using TS to build some Components in React, the thing is I'm working with Component Framework and whenever I try to send the props to a Function Component, if I try to use them, I get the next error:

Property 'text' does not exist on type '{ children?: ReactNode; }'.

The code is like this: The props declaration:

    public props: IFirstButton = {
        text: "",
        entity: "",
        selectedField: "",
        context: null,
        onChangeText: this.onChangeText.bind(this)
    };

Here is the calling to the Component:

        ReactDom.render(
            React.createElement(AppComponentExample, this.props),
            this._container
        )

The Component calling Function Component:

    public render(): JSX.Element {
        return (
            <React.Fragment> 
            <PanelBasicExample {...this.props} ></PanelBasicExample>
            </React.Fragment>
        );
      }

And finally, the Function Component:

export const PanelBasicExample: React.FunctionComponent = (props) => {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
  const searchText: any = "Selector Cuenta Bancaria" || props.text;
  console.log(props);
  const panelStyles: Partial<IPanelStyles> = {
    main: {
        alignContent: "center",
        '@media(min-width: 480px)': {
        width: "100%",
        position: "absolute",
        overflow: "hidden auto",
      }
    },
    header: {
      width: "100%",
      textAlign: "center"
    }
  }
  const panelStyle = {
    height: "80%",
    left: "25%",
    right: "25%"
  }
  return (
    <div>
      <DefaultButton text={searchText} onClick={openPanel} />
      <Panel
        headerText="Selector Cuenta Bancaria"
        isOpen={isOpen}
        onDismiss={dismissPanel}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Cerrar"
        style={panelStyle}
        styles={panelStyles}
      >
        <TableExample {...props}></TableExample>
      </Panel>
    </div>
  );
};

PD: That console log logs what I'm expecting (the correct object with the data I need)

Whenever I try to use a property from the props in the Function Component — Tomas Barreiro
– Tomas Barreiro, Commented Nov 24, 2020 at 12:46

Eliav Louski · Accepted Answer · 2020-11-24 12:43:58Z

1

the problem is most likely is the type declarations with the DefaultButton component(which you did not provide in the question code).

   <DefaultButton text={searchText} onClick={openPanel} />

add text:string to the props DefaultButton accepts.

answered Nov 24, 2020 at 12:43

Eliav Louski

5,6125 gold badges39 silver badges77 bronze badges

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

2 Comments

Tomas Barreiro Over a year ago

Hey! Thank you for your help! The Default Button is from the Fluent UI, that's why I didn't provide the code. Because of this, I can't change the props DefaultButton accepts.

Eliav Louski Over a year ago

Got it, try 'npm install @types/<theLibName>', sometimes when using typescript you need to the download the types defenitions in addition to the normal package

Collectives™ on Stack Overflow

Using an object as parameter in a React Function Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related