I'm having a problem while running my react js project.
componentDidMount not working.
my react.js version is ^16.13.1.
My code:
import React, { Component } from "react";
import "../../Assets/Styles/common.css";
import "./settingView.css";
import Sidebar from "../../Components/Sidebar/sidebar";
import Navbar from "../../Components/Navbar/navbar";
import Setting from "../../Components/Setting/setting";
import { getERPData } from '../../LocalStorage/localSrorage';
import history from '../../Routing/history';
class SettingView extends Component {
componentDidMount(){
console.log("Setting");
if(!getERPData()){
history.push("/");
console.log("Data not Found");
}
else{
console.log("Data Found");
}
}
render() {
return (
<React.Fragment>
</React.Fragment>
);
}
}
export default SettingView;
Here is the whole code for my component.
componentDidMount not working.
Ciao, if you are using React 16.13.1 you could use Hooks:
export default function SettingView {
useEffect(() => {
console.log("Setting");
if(!getERPData()){
history.push("/");
console.log("Data not Found");
}
else{
console.log("Data Found");
}
, []);
return (
<React.Fragment>
</React.Fragment>
);
}
By the way. I got solution for the whole problem. I just restricted the JSX on conditional rendering of local storage. and it worked.
import React, { Component } from "react";
import "../../Assets/Styles/common.css";
import "./settingView.css";
import Sidebar from "../../Components/Sidebar/sidebar";
import Navbar from "../../Components/Navbar/navbar";
import Setting from "../../Components/Setting/setting";
import { getERPData } from '../../LocalStorage/localSrorage';
import history from '../../Routing/history';
class SettingsPage extends Component {
state = { }
componentDidMount(){
if(!getERPData()){
history.push("/");
}
}
render() {
return (
<React.Fragment>
{
getERPData()?
<div className="w-100">
All My JSX here
</div>
:""
}
</React.Fragment>
)
}
}
export default SettingsPage;
this is how all the things got fine
Related
Hey this is my code and I want to print the networkType but it is not priniting out anything this code was working in App.js but not in home.js.
I created a class component in home.js
Home.js:
import {Component, React} from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Web3 from 'web3';
class Home extends Component
{
state={
person : [
{networkType:'None'}
]
}
componentDidMount()
{
this.loadBlockchainData();
}
async loadBlockchainData()
{
const web3 = new Web3(Web3.givenProvider || "https://localhost:8545");
const network = await web3.eth.net.getNetworkType();
this.setState(
{
person:[
{networkType:network}
]
}
)
}
render()
{
return(
<div>
<h1>Hello</h1>
<h1>Network is: {this.state.networkType}</h1>
</div>
)
}
}
export default Home;
Just update like this:
this.state.person[0].networkType
I trying to test a React component which renders a D3 element in another class, below is the component code.
import React, {Component} from 'react';
import {graphql} from "react-apollo";
import * as compose from 'lodash.flowright';
import MostConvD3bar from './MostConvD3bar'
import MostConvProdQuery from "../../Query/MostConvProdQuery";
import style from "./MostConvProds.css"
class MostConvProds extends Component {
componentDidMount(){
if (!this.props.loading)
new MostConvD3bar(this.refs.mostConChart, this.props.products)
}
componentWillReceiveProps(nextProps){
if (!nextProps.loading)
new MostConvD3bar(this.refs.mostConChart, nextProps.products)
}
render() {
return (
<div className={style.container} ref="mostConChart"> </div>
)
}
}
const mostConvQuery = {
name: "mostConvQuery",
props({ mostConvQuery: { error, loading, mostConverted } }) {
return {
loading,
error,
products: mostConverted
}
}
}
export default compose(
graphql(MostConvProdQuery, mostConvQuery))(MostConvProds);
I have imported lodash.flowright as compose as you can see, but I am getting an error like below.
TypeError: compose is not a function
Any help will be appreciated.
Replace:
import * as compose from 'lodash.flowright';
with:
import { flowRight as compose } from 'lodash';
I wonder how to use Inject without decorator.
First, I made this as Store.
//Data/imagedb
import { decorate, observable } from 'mobx';
class imageStore {
list = {
keyword : 'yoyo',
}
}
decorate(imageStore, {
list: observable,
})
export default imageStore;
Second, I made this code to inject Store on it.
//components/Image
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
class Image extends Component {
render() {
const onPut2 = {onPut};
return (
<div>
{onPut2}
</div>
);
}
}
export default inject(({ imSt }) => ({
onPut: imSt.list.keyword,
}))(observer(Image));
And finally, this is my last code.
The error is "Onput is not defined" in second code.
import React from 'react';
import Image from 'components/Image';
import { Provider } from 'mobx-react';
import imageStore from 'Data/imagedb'
const imSt = new imageStore();
const Home = () => {
return (
<div>
<Provider imSt={imSt}>
<Image />
</Provider>
</div>
);
};
export default Home;
I do have this code and I'm going to use Cookies for first time but I get error below , anyone who can help me to fix the problem ?
"ERROR I FACE : Attempted import error: 'react-cookie' does not contain a default export (imported as 'Cookie'). "
import React from 'react';
import ReactDom from 'react-dom';
import './App.css';
import CountDown from './CountDown';
import Basket from './Basket';
import Cookie from 'react-cookie'
class Products extends React.Component{
constructor(props){
super(props);
this.state={
order : []
}
this.shop = this.shop.bind(this);
}
prevstate = [];
`enter code here`shop(evt){
this.prevstate.push(evt.target.id);
this.setState({
order : this.prevstate
})
console.log(Cookie.get('selected'))
Cookie.set('selected' , this.props.cart , {path :' /'});
}
render(){
return(
<div className="prowrap">
{this.props.prolist.map((name) => (
<div className="pro" key={name.id} style={{border:"1px red
solid"}} >
<img src={name.image}/>
<p>{name.name}</p>
<p>{name.detail}</p>
<p className="countdown"><CountDown time={name.date}/></p>
<div className="price">{name.price} Euro</div>
<button className="shop" id={name.id} onClick={this.shop}>Add To
Cart</button>
</div>))}
<Basket cart={this.state.order} allpro={this.props.prolist}/>
</div>
)
}
}
export default Products;
The error is clear react-cookie doesn’t have default export so you cannot import it like
import Cookie from 'react-cookie';
You need to import it like below
import { Cookies } from 'react-cookie';
Also it's not Cookie but Cookies. You are importing it wrongly
When it is default export then you don’t use {} to import but if it is not default export then you use {} to import it.
You need to import like import { withCookies, Cookies } from 'react-cookie'; and then cookies.get('selected'), refer the code below
Read the package readme carefully.
// App.jsx
import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';
import NameForm from './NameForm';
class App extends Component {
static propTypes = {
cookies: instanceOf(Cookies).isRequired
};
constructor(props) {
super(props);
const { cookies } = props;
this.state = {
name: cookies.get('name') || 'Ben'
};
}
handleNameChange(name) {
const { cookies } = this.props;
cookies.set('name', name, { path: '/' });
this.setState({ name });
}
render() {
const { name } = this.state;
return (
<div>
<NameForm name={name} onChange={this.handleNameChange.bind(this)} />
{this.state.name && <h1>Hello {this.state.name}!</h1>}
</div>
);
}
}
export default withCookies(App);
I’m new to Relay (with reactjs) and have a problem with updating my UI after a commit mutation in the viewer. In my example I have a Salutation Component with the first name of the user and to simplify this, I put a input field right after the output of the name.
When the user changes the name in the textfield, I send this to my updatemutation and to the API. My problem is that I don’t know how to update the name above the input, after the new name was saved. Could anyone help me - what do I need to do in the updater?
Many thanks!
The "root"-Component:
import React, {Component} from 'react';
import {QueryRenderer, graphql} from 'react-relay';
import environment from 'app/settings/createRelayEnvironment';
import Salutation from 'app/components/dashboard/includes/Salutation';
const DashboardQuery = graphql`
query DashboardQuery {
viewer {
...Salutation_viewer
}
}
`;
class Dashboard extends Component {
render() {
return (
<QueryRenderer
environment={environment}
query={DashboardQuery}
render={({error, props}) => {
if (error) {
return <div>{error.message}</div>;
} else if (props) {
return (
<div>
<Salutation viewer={props.viewer}></Salutation>
</div>
);
}
return <div>Loading</div>;
}}
/>
);
}
}
export default Dashboard;
The Salutation-component:
import React, {Component} from 'react';
import {createFragmentContainer, graphql} from 'react-relay';
import PropTypes from 'prop-types';
import UpdateDashboardMutation from 'app/mutations/UpdateDashboardMutation';
class Salutation extends Component {
render() {
return (
<div className="salutation">
<h2>Willkommen {this.props.viewer.firstName}</h2>
<input type="text" onChange={this._onChange.bind(this)}/>
</div>
);
}
_onChange(event) {
UpdateDashboardMutation(event.currentTarget.value);
}
}
Salutation.propTypes = {
viewer: PropTypes.object
};
export default createFragmentContainer(Salutation, graphql`
fragment Salutation_viewer on Viewer {
firstName
}
`);
And the Updatemutation:
import {commitMutation, graphql} from 'react-relay';
import environment from 'app/settings/createRelayEnvironment';
const mutation = graphql`
mutation UpdateDashboardMutation($input: UpdateDashboardMutationInput!) {
updateDashboard(input: $input) {
ok,
errors {
field,
messages
}
}
}
`;
function UpdateDashboardMutation(firstName) {
commitMutation(
environment,
{
mutation,
variables: {
input: {
firstName
}
},
updater(store) {
// what i have to do here?
}
}
);
}
export default UpdateDashboardMutation;
Try:
const viewer = store.getRootField('viewer');
viewer.setValue(firstName, 'name');
See https://facebook.github.io/relay/docs/en/relay-store for details.