I have a function ChartWrapper and a class called LineChart.
All the code:
index.js ->
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
App.js ->
import React, {useRef, useEffect, useState, Component} from 'react';
import './App.css';
import ChartWrapper from './ChartWrapper'
class App extends Component {
render() {
return (
<div id="app">
<ChartWrapper />
</div>
)
}
}
export default App;
ChartWrapper.js ->
import React, {Component, useEffect} from 'react';
import { useRef } from 'react';
import LineChart from './LineChart'
function ChartWrapper() {
const svgRef = useRef();
console.log("works");
useEffect( () => {
const chart = <LineChart parent = {svgRef} />
console.log(chart);
}, []);
return (
<svg ref={svgRef}>
</svg>
);
}
export default ChartWrapper;
LineChart.js ->
import React, {Component} from 'react'
import {scaleLinear} from 'd3-scale'
import {max} from 'd3-array'
import {select} from 'd3-selection'
class LineChart extends Component {
constructor (props) {
super(props);
this.svg = select(props.parent);
console.log("does this work");
console.log(this.svg);
}
}
export default LineChart;
The ChartWrapper function creates a LineChart object and passes a const as a prop. To check if the code is working, I have print statements. For some reason, the print statements in ChartWrapper work fine. The print statements in LineChart constructor class however do not.
Am I missing something?
What you get in return when you log chart to the console is just an object representing the component, like this:
If you look at the type, it specifies the function/class to call. The class is only instantiated when it's rendered.
And the chart component is not returned, therefore react does not render it.
you need to call the render method for LineChart
Related
I am using Centrifugo websocket server. I need to connect to Centrifugo and store connection instance for future usage from from multiple components.
Will it be the good way to create this kind of export from ./socket.js? Will centrifuge.connect() and centrifuge.setToken('') be executed if I gonna import ./socket.js module muitiple times?
./socket.js
const Centrifuge = require('centrifuge');
const centrifuge = new Centrifuge('ws://localhost:8000/connection/websocket');
centrifuge.setToken('');
centrifuge.connect();
export default {
socket: centrifuge,
};
./App.jsx
import React from 'react';
import { socket } from '../socket'; // first import
import SomeComponent from './components/SomeComponent';
import SomeSecondComponent from './components/SomeSecondComponent';
export default () => (
<>
<SomeComponent />
<SomeSecondComponent />
</>
)
./components/SomeComponent.jsx
import React from 'react';
import { socket } from '../socket'; // second import
export default () => <>...</>;
./components/SomeSecondComponent.jsx
import React from 'react';
import { socket } from '../socket'; // third import
export default () => <>...</>;
What would it be the best way to make instance and reuse it?
If you want to use a single instance only, it's better to import it in one place only. Best to import in the parent component and pass it as props to the children.
So your app.jsx would become:
import React from 'react';
import { socket } from '../socket'; // first import
import SomeComponent from './components/SomeComponent';
import SomeSecondComponent from './components/SomeSecondComponent';
export default () => (
<>
<SomeComponent socket={socket} />
<SomeSecondComponent socket={socket} />
</>
)
Now socket will be available as the props in both the components.
For eg. In ./components/SomeComponent.jsx
import React from 'react';
export default ({socket}) => <>...</>;
I'm developing an app fetching api and displaiy it using ReactJS, My index.js file is:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render( < App /> , document.getElementById('root'));
registerServiceWorker();
the error is
TypeError:
Object(...) is not a function
in Module../src/index.js
how do I solve this? Thanks!
My App.js code is here
import React, {
Component
} from 'react';
import PokeList from './PokeList';
import './styles/App.css';
class App extends Component {
constructor() {
super();
this.state = {};
}
render() {
return ( <div className = "App" >
<PokeList />
</div>
);
}
}
export default App;
PokeList.js
import React from 'react';
import './styles/PokeList.css';
const PokeList = () => {
return ( <section className = "poke-list" >
</section>
)
}
export default PokeList;
I think You just need to upgrade to react > 16.8. There are no breaking changes in regards to react, so you should be fine.
I need to test a react components with props mounts ok and renders its content such as paras and divs correctly. My code can be found below or in this sandbox
I tried testing it with a default prop but that didn't work.
import React from 'react';
import test from 'tape';
import {mount} from 'enzyme';
test('testing', t => {
t.doesNotThrow(() => {
wrapper = mount(<App2 txt={ok}/>);
}, 'Should mount');
t.end();
});
And this is my component with props.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import App from './index'
export default class App2 extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
const {txt}=this.props
return (
<div>
<p>hi {txt}</p>
</div>
);
}
}
And the outer component supplying the prop.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import App2 from './app2'
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<Hello name={this.state.name} />
<p>
Start editing to see some magic happen :)
</p>
<App2 txt={this.state.name}/>
</div>
);
}
}
render(<App />, document.getElementById('root'));
So you would do something like providing the properties yourself and ensuring that it renders with them:
test('test your component', () => {
const wrapper = mount(<App2 txt={'michaelangelo'} />);
expect(wrapper.find('p').text()).toEqual('hi michaelangelo');
});
You shouldn't worry about testing the and html elements like that, but rather the props that you pass and that they render in the right place i.e., in the p tag
Just started using react and i am following a tutorial. I have the same code as him but i am getting the following error.
./src/index.js
Attempted import error: './components/App' does not contain a default export (imported as 'App')###
Here are my index and component file.
my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<App/ >,document.getElementById('root')
)
my App.js
import React, {Component} from 'react';
class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}
You need to export your App component.
Under the component put export default App
It should look like:
import React, {Component} from 'react';
class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}
export default App
export the App Component
Try following
import React, {Component} from 'react';
export default class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object. 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 App.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
registerServiceWorker();
//App.js
import React, { Component } from 'react'; //import logo from
'./logo.svg'; import './App.css';
import HeaderComponent from
'./Components/HeaderComponent/HeaderComponent';
import FooterComponent from './Components/FooterComponent/FooterComponent';
import Main from './Components/Main/Main';
const App = () => {
return(
<div>
<HeaderComponent />
<Main />
<FooterComponent />
</div> ) }
export default App;
I think the error is very clear, one of your imports is not importing a valid react component.
To fix this, make sure all your imports are exporting a react component, either a class or a function for stateless components.
you might have something like the following for each component.
export default HeaderComponent extends Component { ... }
export default Main extends Component { ... }
export default FooterComponent extends Component { ... }