I want to dynamically import a react js module. The module is not component it is an object of data, so I cannot use react code splitting. In the webpack docs there is an example with a promise. When I use it like that in a react component, it throws an error because the component tries to render before the promise hadd been resolved. I want to import it in that way in case the data does not exist, I could provide default data.
const dataProps = import(`./dataObject.js`).then(data=> data);
...
render() {
<SomeComponente data={data} />
}
I think the best way to do this is something like:
const dataProps = import(`./dataObject.js`); // Start the importing
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state {
data: null
}
}
componentDidMount() {
dataProps.then(data => this.setState({ data });
}
render() {
if (this.state.data !== null) {
return <SomeComponent data={this.state.data} />
}
return null;
}
}
This way when the import is done only then will you actually render anything
Related
I am using ApolloClient GraphQl query inside react class to fetch data from server:
import React, {Component} from 'react';
import {useCompanyLogo} from '../../queries/companyLogo';
class Logo extends Component {
constructor() {
super();
this.state = {logo: ""};
}
componentDidMount() {
const {error, loading, data} = useCompanyLogo();
if(loading) return <div>spinner</div>
if(error) return <div>error!</div>
const imageSource = data.companyLogo[0].image.urls[0];
this.setState({logo: imageSource});
}
render() {
return (
<div className="logo-area">
<img src={"http://computer-313:5000" + this.state.logo} alt="Businex-Logo" style={{width:"80px"}} />
</div>
);
}
}
export default Logo;
And the query is as below:
import {useQuery, gql} from "#apollo/client";
var COMPANY_LOGO = gql`
query CompanyLogo {
companyLogo {
image {
urls(first: 1)
}
}
}
`;
export const useCompanyLogo = () => {
const {error, data, loading} = useQuery(COMPANY_LOGO);
console.log(error, data, loading);
return {
error,
data,
loading
}
}
Everything works good when I use function instead of class But when I run this code I get the following error:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
According to the React.js documentation you cannot use Hooks inside of Class Components.
You can’t use Hooks inside a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.
You can try to use high order components and be able to pass the hooks into your Class Component that way.
I built a react component that imports a Json file into an array to map the result. I need that array in another component. I don't know if I must built this component inside the new component or if there's a method to export the needed array (data). The array source is updated every 4 seconds.
Thanks for your help.
My first component is:
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class Ramas extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
const fetchData = () => {
axios
.get('http://localhost:8888/dp_8/fuente/procesos_arbol.json')
.then(({ data })=> {
this.setState({
data: data
});
console.log(data);
})
.catch(()=> {console.log('no recibido');});
};
fetchData();
this.update = setInterval(fetchData, 4000);
} // final componentDidMount
render() {
const initialData = this.state.data.map((el) => {
return (
<p>id={ el.id } | name - { el.name } | padre - {el.parent}</p>
);
});
return (<div className="datos_iniciales">
{ initialData }
</div>);
}
}
ReactDOM.render(
<Ramas />,
document.getElementById('container')
);
make one top level component that can contain the two components.
in the Ramas component ->
const updatedData = setInterval(fetchData, 4000);
this.props.datasource(updatedData);
write a new top level component ->
class TopComponent Extends React.Component{
state = {data: ''}
handleDataUpdate = (updatedData) => {
this.setState({data: updatedData});
}
render = () => {
<Ramas datasource={this.handleDataUpdate}>
<SecondComponent updatedData={this.state.data}>
</Ramas>
}
}
now from SecondComponent updatedData prop you can get the fresh data
By the way it is in ES7 syntax I wrote
If you have parent component, you should pass function from it to this component as a prop.
That function will than set state and data will flow one way as it's imagined with ReactJS.
For example instead of this.setState, you could call
this.props.jsonToArray
and in jsonToArray you should call setState which will pass data to that seccond component.
I am trying to use my url as a parameter by passing the Match object into my react component class. However it is not working! What am I doing wrong here?
When I create my component as a JavaScript function it all works fine, but when I try to create my component as a JavaScript class it doesn't work.
Perhaps I am doing something wrong? How do I pass the Match object in to my class component and then use that to set my component's state?
My code:
import React, { Component } from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
class InstructorProfile extends Component {
constructor(props, {match}) {
super(props, {match});
this.state = {
instructors: [],
instructorID : match.params.instructorID
};
}
componentDidMount(){
axios.get(`/instructors`)
.then(response => {
this.setState({
instructors: response.data
});
})
.catch(error => {
console.log('Error fetching and parsing data', error);
});
}
render(){
return (
<div className="instructor-grid">
<div className="instructor-wrapper">
hi
</div>
</div>
);
}
}
export default InstructorProfile;
React-Router's Route component passes the match object to the component it wraps by default, via props. Try replacing your constructor method with the following:
constructor(props) {
super(props);
this.state = {
instructors: [],
instructorID : props.match.params.instructorID
};
}
Hope this helps.
Your constructor only receives the props object, you have to put match in it...
constructor(props) {
super(props);
let match = props.match;//← here
this.state = {
instructors: [],
instructorID : match.params.instructorID
};
}
you then have to pass that match object via props int a parent component :
// in parent component...
render(){
let match = ...;//however you get your match object upper in the hierarchy
return <InstructorProfile match={match} /*and any other thing you need to pass it*/ />;
}
for me this was not wrapping the component:
export default (withRouter(InstructorProfile))
you need to import withRouter:
import { withRouter } from 'react-router';
and then you can access match params via props:
someFunc = () => {
const { match, someOtherFunc } = this.props;
const { params } = match;
someOtherFunc(params.paramName1, params.paramName2);
};
Using match inside a component class
As stated in the react router documentation. Use this.props.match in a component class. Use ({match}) in a regular function.
Use Case:
import React, {Component} from 'react';
import {Link, Route} from 'react-router-dom';
import DogsComponent from "./DogsComponent";
export default class Pets extends Component{
render(){
return (
<div>
<Link to={this.props.match.url+"/dogs"}>Dogs</Link>
<Route path={this.props.match.path+"/dogs"} component={DogsComponent} />
</div>
)
}
}
or using render
<Route path={this.props.match.path+"/dogs"} render={()=>{
<p>You just clicked dog</p>
}} />
It just worked for me after days of research. Hope this helps.
In a functional component match gets passed in as part of props like so:
export default function MyFunc(props) {
//some code for your component here...
}
In a class component it's already passed in; you just need to refer to it like this:
`export default class YourClass extends Component {
render() {
const {match} = this.props;
console.log(match);
///other component code
}
}`
I'm trying to get AJAX-retrieved data into a parent React component so it can be fed down to a child component. I'm using the popular pattern for this defined here where a comment list is used as the example:
components/CommentList.js
import React from 'React';
export class CommentList extends React.Component {
constructor(props) {
super(props);
}
render() {
return <ul> {this.props.comments.map(renderComment)} </ul>;
}
renderComment({body, author}) {
return <li>{body}—{author}</li>;
}
}
components/CommentListContainer.js
import React from 'React';
import { CommentList } from './CommentList';
export class CommentListContainer extends React.Component {
constructor() {
super();
this.state = { comments: [] }
}
componentDidMount() {
$.ajax({
url: "http://get/some/api",
dataType: 'json',
success: function(comments) {
this.setState({comments: comments});
}.bind(this)
});
}
render() {
return <CommentList comments={this.state.comments} />;
}
}
index.js: the entry point for webpack
import React from 'react'
import { render } from 'react-dom'
import { CommentListContainer } from './components/CommentListContainer';
window.React = React;
render(
<CommentListContainer />,
document.getElementById('nav__react-target')
)
When doing all this, I get the following error:
Uncaught ReferenceError: renderComment is not defined
I've move the methods around as well as tweaked the importing of dependencies in various spots with no luck. Any ideas?
Thanks in advance.
You don't have unguarded references to sibling methods with ES2015 classes (as you do in Java / C#, etc.) - instead you need to explicitly reference this to get at the methods of the class:
render() {
// I changed map(renderComment) to map(this.renderComment)
return <ul>{this.props.comments.map(this.renderComment)}</ul>;
}
So I'm trying to mock an ajax call using a React's Container(purely to fetch the data and pass it along to its children), but I'm not getting anything.
Instead get the following error: TypeError: Cannot read property 'map' of undefined. Which basically tells me that the users is either empty or not yet defined, right?
Right now I'm following the following structure UserListContainer (fetches the data) => UserList Component (displays the data as a prop).
UserList Container
// Container responsible only to fetch User data
import React from 'react';
import UserList from '../../ui/components/users/userList.jsx';
export default class UserListContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
users: []
}
}
componentDidMount() {
$.ajax({
// url: "../../users/users.json",
url: "https://gist.githubusercontent.com/dantesolis/267a298f3d6ac524bc2a7d80960a16b5/raw/7929bb23f1757b85adcead4eed3023cd3c7453df/users.json",
dataType: "json",
success: function(users) {
this.setState({users: users});
}.bind(this)
});
}
render() {
// const usr = this.props.user;
// let usrs = users_mockup ? users_mockup : this.props.users;
return (
<UserList users={this.state.users} />
);
}
}
UserList Component
import React from 'react';
import User from '../users/user.jsx';
// import { Link } from 'react';
export default class UserList extends React.Component {
constructor(props) {
super(props);
}
renderUser({name, _id}) {
return <li>{_id}-{name}</li>
}
render() {
return (
<div className="main">
<ul>{this.props.users.map(renderUser)}</ul>
</div>
);
}
}
That is because users is undefined in the success callback. This can happen because the URL is not working correctly. After taking a look at it, it seems it returns javascript and not json. You should try removing the comment in the first line to make it json compliant.