CODEWITHSUNDEEP
reactjsreact-native
Chakra
Chakra

Reputation: 2557

Not able to refactor React Native component

I have a react native file called 'AcceptCaption.js' like this

import React from 'react';

import {View, TextInput, RadioForm} from 'react-native';

var radio_props = [
  {label: 'Item', value: 'I'},
  {label: 'Location', value: 'L'},
];

export default function AcceptCaption(props) {
  let caption = props.acceptCaptionProps.caption;
  let setCaption = props.acceptCaptionProps.setCaption;
  let radioButton = props.acceptCaptionProps.radioButton;
  let setRadioButton = props.acceptCaptionProps.setRadioButton;
  let filePath = props.acceptCaptionProps.filePath;

  console.log('Accept Caption', caption);

  return (
    <View style={{marginVertical: 10}}>
      <View>
        <TextInput
          style={{
            height: 40,

            fontSize: 15,
            width: 340,
            marginLeft: 5,
            borderColor: 'gray',
            borderWidth: 2,
          }}
          placeholder="Enter Caption here"
          maxLength={30}
          onChangeText={text => setCaption(text)}
          value={caption}
        />
      </View>
      <View>
        <RadioForm
          style={{
            height: 40,
            alignItems: 'flex-end',
            justifyContent: 'center',
            width: 340,
            marginLeft: 5,
            borderColor: 'gray',
            borderWidth: 2,
          }}
          radio_props={radio_props}
          initial={'I'}
          formHorizontal={true}
          labelHorizontal={true}
          buttonColor={'#3b5999'}
          animation={true}
          onPress={value => {
            setRadioButton(value);
          }}
        />
      </View>
    </View>
  );
}

I call this 'component' from a parent file like this .

import AcceptCaption from './AcceptCaption';

....

<View>
<AcceptCaption
        acceptCaptionProps={{
          caption,
          setCaption,
          radioButton,
          setRadioButton,
          filePath,
        }}
      />
</View>

But I get runtime error as

ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `AcceptCaption`.

Upvotes: 0

Views: 40

Answers (1)

Priyanshu Chauhan
Priyanshu Chauhan

Reputation: 5535

Possible causes for this error are file extension, default export/import and component returned as element not as a component.

  1. Check if webpack is configured for js file
  2. Else import with extension: import AcceptCaption from './AcceptCaption.js';
  3. Check for default export and import is as expected
  4. Check for component definition if anywhere in parent/child component you are defining a component like: const MyComponent = <div>Hello</div> instead of const MyComponent = () => <div>Hello</div>

Upvotes: 1

Related Questions