CODEWITHSUNDEEP
reactjsreact-native
J. Doe
J. Doe

Reputation: 73

Multiple props in react native

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.

Upvotes: 0

Views: 426

Answers (1)

Brian Thompson
Brian Thompson

Reputation: 14395

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.

Upvotes: 2

Related Questions