How can I pass a param for a function inside my React Native Function Component?

Question

I have a Picker component that is populated with data from a local realm database, the component has a function that receives the name of the database schema as a param. What I want to do is, instead of writing the name of the schema inside the function, to receive it as a prop or a param, so I can use the same component to show pickers with different information.

This is my code:

const PickerDB: React.FC<PickerProps> = (props) => {
    const [data, setData] = useState([]);

    async function loadData() {
        setData(await GetDataFromDB('source')); // this is what I want to modify
    }

    useEffect(() => {
        loadData();
    }, [])

    let values = data.map((data) => {
        return (
            <Picker.Item
                label={data.description}
                value={data.id}
                key={data.id}
            />
        )
    })

    return (
        <Picker
            selectedValue={props.selectedValue}
            style={{ height: 45, width: "70%" }}
            onValueChange={props.onValueChange}
        >
            {values}
        </Picker>
    );

I need to create my component using React.FC<PickerProps> because of other functions inside my app.

I would like to use my component like this:

<PickerDB source={'schemaName'} />

<PickerDB source={'schemaName'} /> will store a prop source in the PickerDB, which you simple can access with props.source within your fetch — SidoShiro92
– SidoShiro92, Commented Jan 19, 2021 at 17:46

Taghi Khavari · Accepted Answer · 2021-01-19 17:51:07Z

2

Here is what you need to do:

async function loadData(source) {
  setData(await GetDataFromDB(source)); // this is what I want to modify
}

useEffect(() => {
  if (props.source) {
    loadData(props.source);
  }
}, [props.source]);

answered Jan 19, 2021 at 17:51

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

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

6 Comments

Guilherme Moretto Over a year ago

I have already tried this, what i can't do is make my component receive the source, if i try <PickerDB source={'schemaName'} /> i get this error: Property 'source' does not exist on type 'IntrinsicAttributes & PickerProps & { children?: ReactNode; }'.

Taghi Khavari Over a year ago

@GuilhermeMoretto This is the 100% the answer. your error is a typescript error and you need to add source: string to the PickerProps and you good to go

Guilherme Moretto Over a year ago

Ok, thank you. Can you tell me or show me how i can do it?

Taghi Khavari Over a year ago

Do you have access to PickerProps?

Guilherme Moretto Over a year ago

I created an interface and extended PickerProps, then added the source, thanks a lot for the help.

|

Collectives™ on Stack Overflow

How can I pass a param for a function inside my React Native Function Component?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related