I have a functional component, I wanted to import that component and use it inside Accordion which is a third party package for making collapsible. Package name: react-native-collapsible/Accordion
My Component:
function _renderADHeader() {
...
...
...
export default connect(mapStateToProps, mapDispatchToProps)(_renderADHeader);
In my main file I have exported this component in the following way:
import {_renderADHeader} from './sections/address/headerBar/index';
And I wanted to use it inside Accordion
<Accordion
renderHeader={_renderADHeader}
/>;
But, I am getting the following error:
TypeError: renderHeader is not a function.
I tried to write this._renderHeader , but that is also not working. Please tell me what I am doing wrong.
Related
I've moved my code of a custom React Native component to it's own file such as this:
import React from 'react';
import { StyleSheet, Text, View } from "react-native";
export default class MyButton extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Text style={{fontSize: 20, color: "#008000"}}>Foo Bar</Text>
);
};
};
In App.js I can refer to that file that contains that code. The framework does not complain:
import { MyButton } from "./MyButton";
But as soon as I include MyButton in the App rendering function I receive the following 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.
The rest of the error message is completely useless.
I did some searches on the web to learn what could have caused that error. But none of all hints I found seemed to be related to my case here. For example I use import React from 'react'; which is advised by some answers even here on stack overflow, but still this doesn't work. (See: Custom component undefined in React Native)
If I move the code to App.js everything works fine. If I move it to another file things don't work. What do I need to change in that file in order to successfully have a component in that file? And include that in similar way as those native components in my App.js?
Thank you for your help!
Your import statement is incorrect.
import { MyButton } from "./MyButton";
This import statement imports a named export called MyButton from the ./MyButton module. However, in your MyButton file you are default exporting the MyButton component. What you want to do is:
import MyButton from "./MyButton";
which imports whatever is exported by default from the module, in this case the MyButton component.
I am trying to use vue-components in a webpack Typescript project but it doesn't seem to be working. I don't get any errors during the build and run, but the component HTML is never inserted into the output - I can just see the HTML source of the component instead i.e. .
My project is an ES2015 using Vue2 in VS.Net 2017. My component looks like this:
import Vue from 'vue'
import Component from 'vue-class-component'
// The #Component decorator indicates the class is a Vue component
#Component({
// All component options are allowed in here
template: '<button #click="onClick">Click!</button>'
})
export default class MyHeader extends Vue {
// Initial data can be declared as instance properties
message: string = 'Hello!'
// Component methods can be declared as instance methods
onClick(): void {
window.alert(this.message)
}
}
I have tried the official reference guide to register the component and use it. When I look at the vue-component example, it uses the same format as my project so I added the markup and properties to my Typescript class definition:
import Vue from 'vue';
import Component from 'vue-class-component';
import MyHeader from './MyHeader';
#Component({
components: {
MyHeader
}
})
export default class GetDataComponent extends Vue {
<...rest of class...>
}
but in my project the "components:" section is squiggly-underline-red with the message:
Object literal may only specify known properties, but 'components'
does not exist in type 'VueClass'. Did you mean to write
'component'?
Every example I have seen with vue-component (such as this one) uses the "components:" option in the #Component to register and use their Vue component, but in my project it doesn't seem to like it. I have also tried global registration of the component (such as this one) which includes the line:
// Register the component globally
Vue.component(my-header', MyHeader)`
but in that case I get an error like this:
Type 'typeof MyHeader' is not assignable to type 'AsyncComponent'
The Vue file works (without the Component added) and all content is rendered correctly. It's getting the Component included that doesn't work - I either get Design-time errors per above, or nothing appears in the output at all.
Is my import wrong? Or the format of the #Component? I get the feeling I am doing something that is very basic, very wrong...
I have an index.js file in my Vue project's components folder which allows me to import components like this:
import { home, search, tour } from '#/components';
The index.js file:
export { default as home } from './home/home.vue';
export { default as search } from './search/search.vue';
export { default as tour } from './tour/tour.vue';
export { default as tourItem } from './tour-item/tour-item.vue';
Now, when doing this with nested components (a component that should be used in another) it gives me the unknown custom element error.
I don't get why that error is thrown - it's just another component, right?
To be more clear, this works:
import tourItem from '#/components/tour-item/tour-item.vue';
And this doesn't:
import { tourItem } from '#/components';
I had the same issue. Try export children/local component just BEFORE parent in index.js. This solve problem in my case.
Solution in Vue forum
I am hitting this error when i am trying to define my own custom components.
// /common/MyAppText.js
import React, {Component} from 'react';
import {
Text,
View,
} from 'ReactNative';
class MyAppText extends Component {
render(){
return (
<View>
<Text>hello</Text>
</View>
)
}
}
export default MyAppText
On the other app, i tried to import it and use it by
import MyAppText from './common/MyAppText'
class Home extends Component {
render(){
return (
<View>
<MyAppText />
</View>
)
}
}
But i hit the error "expected a string or a class/function but got: undefined, please check render method of 'MyAppText'. Anyone can see what is wrong with the export syntax?
If i defined everything in the same document then it works, so it is something with the export that i couldn't figure out.
Your own export/import looks fine. Not sure if this is the issue, but the line
import {..} from 'ReactNative';
Should be:
import {..} from 'react-native';
You might expect that to crash with a different error (module not found), but since this internal React Native file exports a globally available module "ReactNative" via Haste, your import ends up picking that file. Because that file doesn't export properties View and Text, the code compiles fine, but ends up with undefined variables.
Edit for more context:
The React Native bundler (called Metro) uses Facebook's own module system (called Haste), which allows anybody to decorate a file with a comment #providesModule Name, and then import it from globally anywhere with just import ... from 'Name';
One of the internal renderer modules declares #providesModule ReactNative. So when you've imported from 'ReactNative', you got that module instead of a build error.
I am using a HOC in a React component that looks like:
import React from 'react';
import Wrapper from 'wrapper';
class Component extends React.Component {
render () {
return (
<div className='component' />
)
};
}
export default Wrapper(Component)
When testing Component using Mocha I am attempting to look for a class name that should be contained within Component. Like so:
describe('Component', function () {
it('can be mounted with the required class', function () {
const component = shallow(
<Component />
);
expect(component).to.have.className('component');
});
});
The problem is that Mocha doesn't know to look within the wrapper for the Component and attempts to find it in the HOC. Which of course it will not.
The error I am receiving is:
AssertionError: expected <Wrapper(Component) /> to have a 'component' class, but it has undefined
HTML:
<div class="component">
</div>
How do I tell Mocha to look within the HOC for the correct location of the class name instead of the HOC itself?
You can use enzyme .dive()
const component = shallow(<Component />).dive();
expect(component.props().className).toEqual('component')
The problem is the use of Enzyme's shallow instead of mount, which is required when testing HOC's.
So, use mount.
I added this to a github project so you can see. Use my redux-form-test project and be sure to use the stackoverflow-question-38106763 branch. See the tests/unit/index.js file.
Be sure to read the source code of the test file. One of tests fails intentionally to reproduce your issue.
What's tricky in this situation is that the render method of the HOC exactly replicates the component it's wrapping. See the render method in the source of the react-onclickoutside component you mention. That's why the AssertionError you see is confusing: it shows you HTML that looks like it's satisfying the assertion. However, if you run
console.log(component.debug())
before your expect, it'll show
<Component />
That's because shallow only goes one level deep. And enzyme is not using the rendered HTML for the assertion, it's using the React elements, which does not have the component class on it, as you can see.