Multiple props in react native

Question

const UserInput: React.FunctionComponent<{ text: string, onChange (text: string): void}> = (props, userContent: any) => {
  console.log('12345', userContent.Content) // Only returns undefined if userContent is after props
  return (
    <View>
      <TextInput
      value={props.text}
      mode='outlined'
      placeholder={'Text'}
      onChangeText={props.onChange}
    />
    </View>
  );
}

I want it so that when I console.log, it comes back with something not undefined. If I put userContent first in the props, it works fine but the then everything in FunctionComponenet doesn't work. Any ideas? I've tried quite a lot of different ways but can't figure it out.

Brian Thompson · Accepted Answer · 2020-03-10 14:42:36Z

2

A functional component only accepts one argument props, so a second argument will always be undefined (in your case userContent).

You need to access the prop through props like this:

console.log('12345', props.userContent.Content)

Or you could destructure it from props like this:

const UserInput = ({userContent, ...props}) => {
  console.log('12345', userContent.Content)

It looks like that will also require a change to your interface.

edited Mar 10, 2020 at 14:42

answered Mar 10, 2020 at 14:39

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

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

4 Comments

J. Doe Over a year ago

Thanks, I've tried this but it doesn't seem to work (I get undenfied is not an object). I have added it to the functional component part instead of in the props brackets.

const UserInput: React.FunctionComponent<{ text: string, onChange (text: string): void, userContent: any}> = (props) => {

Brian Thompson Over a year ago

That won't have any effect on this. I'm assuming you're using typescript, that's all that change will effect. If you are still getting undefined, you need to check that you are passing the prop into the component.

Brian Thompson Over a year ago

"If I put userContent first in the props, it works fine" - If this is the case, should it just be props.Content?

J. Doe Over a year ago

That worked, don't know what I did different before. Thanks man!

Collectives™ on Stack Overflow

Multiple props in react native

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related