I want to render an array to react console, but I get the following error :
TypeError: products.map is not a function
This is my App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {
categories: []
}
renderCategory = ({category_id, name}) => <div key={category_id}>{name}</div>
render() {
const categories = this.state;
return (
<div>
{categories.map(this.renderCategory)}
</div>
);
}
}
export default App;
After i run : npm start in console I got no errors in compilation !
Destructuring is incorrect. Update to :
const { categories } = this.state;
Related
I'm trying to follow a TodoList tutorial but I'm already bumbing into this js mapping error.
It's about passing a context from a "TodoContextProvider" into the child components "TodoTable".
The error message I get is the following:
TodoTable.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
At this point (with these 3 files), the "Do something" task should appear in the dom, but instead I'm getting the error above.
I have checked the code several times but can't find the error.
Since I'm stuck for several hours now, I'd be happy if someone could have an eye on it, thanks:
// Entry point App.js root/assets/js/App.js
import React from "react";
import { createRoot } from "react-dom/client";
import TodoTable from "./components/TodoTable";
import TodoContextProvider from "./contexts/TodoContext";
export default class App extends React.Component {
render() {
return (
<TodoContextProvider>
<TodoTable />
</TodoContextProvider>
);
}
}
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);
// TodoContext.js root/assets/js/contexts/TodoContext.js
import React, { createContext } from "react";
export const TodoContext = createContext();
class TodoContextProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: [{ task: "Do something" }],
};
}
// Create
createTodo() {}
// Read
readTodo() {}
// Update
updateTodo() {}
// Delete
deleteTodo() {}
render() {
return (
<TodoContext.Provider
value="{{
...this.state,
createTodo: this.createTodo.bind(this),
updateTodo: this.updateTodo.bind(this),
deleteTodo: this.deleteTodo.bind(this),
}}"
>
{this.props.children}
</TodoContext.Provider>
);
}
}
export default TodoContextProvider;
// TodoTable.js root/assets/js/components/TodoTable.js
import React, { useContext } from "react";
import { TodoContext } from "../contexts/TodoContext";
function TodoTable() {
const context = useContext(TodoContext);
return (
<div>
{context.todos.map((todo) => (
<div>{todo.task}</div>
))}
</div>
);
}
export default TodoTable;
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 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);
in reactjs, how to access the component method from other class by using ES6 method?
I am facing a problem in React JS. I'm unable to fetch the component method from other class by using enum.
Please help me out to solve this issue.
I'm trying in ECMA6 format.
Thanks in advance.
import React from 'react';
import {Component} from 'react';
const Message = (props) =>
{
const Enum = require('node-enumjs');
var Days = ({
constants: {
Monday: {
say1() {
return 'mondays are bad!';
}
},
Tuesday: {
say: function () {
return this.name() + "s are ok...";
}
},
Wednesday: {
say: function () {
return this.name() + " is the middle of the week...";
}
}
}
})
}
export default Message;
from Message component i have access to say() inside monday.
import React from 'react';
import {Component} from 'react';
import Message from '../../../message';
export default class Content extends Component {
sai() {
return(
<div>
<h1>{Message.Monday.say1()}</h1>
<h1>{Message.Monday.say2()}</h1>
</div>
)}
render() {
return (
<div className="page-title">
<center> Content </center>
<button name="press" onClick = {this.sai}>press</button>
</div>
);
}
}
no error, but, when event rise in browser error like this: flows_content.js:14 Uncaught TypeError: Cannot read property 'say1' of undefined