Develop Reference

Having Trouble Accessing Function in Adjacent JS file

Currently in my directory I have App.js and startMenu.js as two separate files.
I would like to access startMenu.js in my App.js file with the correct React formatting.
Currently I can call the function startMenu() using typical javascript syntax, but I for some reason cannot get the React syntax {startMenu} to work. Any ideas would be appreciated.
My code:
import React from "react";
import startMenu from './startMenu';
import credits from "./credits";
var param = 'start';
class App extends React.Component {
renderSwitch(param) {
switch(param) {
case 'credits':
return credits();
default:
/*LINE IN QUESTION */
return startMenu();
}
}
render() {
return (
<div>
{this.renderSwitch(param)}
</div>
);
}
}
export default App;
Thanks!

It is depending how you are exporting your function.
If is doing this:
export default startMenu;
Then you might import that way:
import myFunction from './path';
That way the name does it care. You can call your function with any name when you are exporting by default.
But if you are exporting that way:
export { startMenu };
or
export startMenu;
So than you need import your function by your reall name, and if you are exporting just using export word, all members will be inside an object.
So you need do that:
import MyFunctions from './path';
or doing a import destruction
import { startMenu } from './path';

You'll need to properly export that function:
export function startMenu(...) { ... }
Then import it:
import { startMenu } from './startMenu';
If that's the only thing exported you can always export default and it simplifies the import.
You can only import things that have been exported. Everything else is considered private and is off-limits.

The JSX syntax: {foo} means "Put this data here".
It doesn't mean "Call this variable as a function".
If you want to call it, you need to do so explicitly: {foo()}.

React Native - Super expression must either be null or a function

I want to build a super class which contains several methods cause I want to call them from different classes. Furthermore, I have the benefit of reducing code.
However, I get the error message "Super expression must either be null or a function"
This is one of my classes where I want to call the function super.interface() from the SuperScreen.js file:
import React from "react";
import { SuperScreen } from "./SuperScreen";
export default class HomeScreen extends SuperScreen {
constructor(props) {
super(props);
this.state = {
isLoading: true,
data: null,
key: 15
};
}
render() {
return super.interface();
}
}
My SuperScreen.js
import React, { Component } from "react";
export default class SuperScreen extends Component {
constructor() {}
interface() {...}
}
However, I still get the message Super expression must either be null or a function. Why and how can I fix it?
Kind regards and Thank You

Your import is a bit messed up.
Remove the curly brackets from SuperScreen import because you exported SuperScreen class as default.
import SuperScreen from "./SuperScreen";
Or correct the export instead
export class SuperScreen extends Component

React Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<div>') is not a valid name

In react applications, we always have a root component and everything else is a child of that component.
So what I decided to do is break that convention whenever I am going to display a modal, and create a new element or a new component and append it directly to document.body.
a child of body we will not have anymore stacking z-index issues, so this modal will always show up 100% of the time. Or at least that was my thinking.
So I made a new component called modal.js
Inside of this modal, rather than returning a div with some fancy css styling on its children I am just going to return a no script tag which means don’t render anything like so:
import React, { Component } from 'react';
import ReactDOM from ‘react-dom’;
class Modal extends Component {
render() {
return <noscript />;
}
}
export default Modal;
So when I display the modal component its not going to display anything on the screen whatsoever. So then how do I get this modal on the screen then?
Well, I decided to do a bit of a workaround by adding in a componentDidMount() like so:
import React, { Component } from 'react';
import ReactDOM from ‘react-don’;
class Modal extends Component {
componentDidMount() {
}
render() {
return <noscript />;
}
}
export default Modal;
So whenever this component gets mounted or rendered to the screen I am going to create a new div in memory and assign it to this.modalTarget like so:
import React, { Component } from 'react';
import ReactDOM from ‘react-don’;
class Modal extends Component {
componentDidMount() {
this.modalTarget = document.createElement(‘<div>’);
}
render() {
return <noscript />;
}
}
export default Modal;
Here is the finished file:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Modal extends Component {
componentDidMount() {
this.modalTarget = document.createElement('<div>');
this.modalTarget.className = 'modal';
document.body.appendChild(this.modalTarget);
this._render();
}
componentWillUpdate() {
this._render();
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(this.modalTarget);
document.body.removeChild(this.modalTarget);
}
_render() {
ReactDOM.render(<div>{this.props.children}</div>, this.modalTarget);
}
render() {
return <noscript />;
}
}
export default Modal;
I was expecting for this to work, maybe get an Inviolant error, but certain not:
Uncaught DOMException: Failed to execute 'createElement' on
'Document': The tag name provided ('<div>') is not a valid name.
I am not sure what is going on here.

A comment from Bravo helped me solve this. What helped me was refactoring this:
this.modalTarget = document.createElement('<div>');
to this:
this.modalTarget = document.createElement('div');

Why don't you use the React.Fragment?
You could do something like that...
const Modal = () => (
<React.Fragment>
<noscript />
</React.Fragment>
);
export default Modal;

Creating a class in react and exporting with higher order components

I am writing a class in React and exporting it with a higher order component, presently I have ...
import React, { Component } from 'react';
import { withRouter } from 'react-router';
/**
Project Editor
*/
class SpiceEditorRaw extends Component { ... }
const SpiceEditor = withRouter(SpiceEditorRaw);
export default SpiceEditor;
Then In a different file I import SpiceEditor and subclass it with
import SpiceEditor from './SpiceEditor'
class NameEditor extends SpiceEditor {
constructor(props){ ... }
...
render () { return (<h1> hello world <h1/>) }
}
However I am getting error:
index.js:2178 Warning: The <withRouter(SpiceEditorRaw) /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change withRouter(SpiceEditorRaw) to extend React.Component instead.
I believe it is possible to create a compoenent using withRouter, so I must be syntaxing incorrectly?

You should generally not use extends on any other component than React.Component. I think the Composition vs Inheritance part of the documentation is a great read on this subject.
You can accomplish almost everything with composition instead.
Example
import SpiceEditor from './SpiceEditor'
class NameEditor extends React.Component {
render () {
return (
<SpiceEditor>
{ /* ... */ }
</SpiceEditor>
)
}
}

how to create a class and another classes extends that class in react js

I am a beginner in react js, before react I was working with angular2 and backbone,and now my problem is I want to create a class such that all of my requests send from this class,like this:
class Ext {
get(url){
$.ajax({
url : url,
success : function(res){},
and ......
});
}
}
in my another component that use from my Ext function :
export default Ext;
import React from 'react';
import {render} from 'react-dom';
import {Ext} from "./module/Ext"
class App extends React.Component {
constructor(props) {
super(props);
/// Ext.get();
}
render () {
return(
<p> Hello React!</p>
);
}
}
render(<App/>, document.getElementById('app'));
how to extends from Ext ??? what is the best way ?

If your get(url) method is something general, it would be wise to have it as part of a separate module, then import and use it in any component you would like.
If, on the other hand, you want to implement a functionality right into a react component, the new ES2015 way of doing it would be by using Composition.
You first create what's called a HOC (Higher order component), which basically is just a function that takes an existing component and returns another component that wraps it. It encapsulates your component and gives it functionality you want, like with mixins but by using composition instead.
So your example would look like something like this:
import React from 'react';
export default const Ext = (Component) => class extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
let result = this.get('some_url').bind(this)
this.setState({ result })
}
get(url) {
$.ajax({
url : url,
success : function(res){
return res;
}
});
}
render() {
// pass new properties to wrapped component
return <Component {...this.props} {...this.state} />
}
};
Then you can just create a stateless functional component and wrap it with the HOC:
import React from 'react';
import Ext from './module/Ext';
class App {
render () {
return <p>{this.result}</p>;
}
}
export default Ext(App); // Enhanced Component
Or using ES7 decorator syntax:
import { Component } from 'react';
import Ext from './module/Ext';
#Ext
export default class App extends Component {
render () {
return <p>{this.result}</p>;
}
}
You can read this post for more details: http://egorsmirnov.me/2015/09/30/react-and-es6-part4.html