Develop Reference

React js does not recognize me map method

English is not my native language, but I will try to make myself understand my best.
In the axios_cards component I am doing a get by axios to an api json and I assign to another component the list of objects as property
import React, { Component } from 'react';
import axios from 'axios';
import CardsGrid from "../Pages/CardsGrid"
class Axios_cards extends Component {
constructor(props) {
super(props)
this.state = {
courses : []
}
}
componentDidMount() {
axios.get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
.then(response => this.setState({
courses: response.data
}))
}
render() {
const {courses} = this.state
return <CardsGrid courses={courses}/>
}
}
export default Axios_cards;
But in the component to which I assign the properties, it does not recognize the array and does not allow me to map the list
import React from 'react';
import Cards from "../Molecules/Cards"
const CardsGrid = ({courses}) => (
<div className="ed-grid m-grid-3">
{
courses.map( e =>
<Cards
id={e.id}
title={e.title}
description={e.description}
image={e.image}
price={e.price}
key={e.id}
/>)
}
</div>
)
export default CardsGrid;
does not recognize courses to be able to map
TypeError: Cannot read property 'map' of undefined
CardsGrid
src/Components/Pages/CardsGrid.jsx:5
2 | import Cards from "../Molecules/Cards"
3 |
4 | const CardsGrid = ({courses}) => (
> 5 | <div className="ed-grid m-grid-3">
6 | {
7 | courses.map( e =>
8 | <Cards

What if your response.data is null or not an array?
This should resolve it
<div className="ed-grid m-grid-3">
{
Array.isArray(courses)? courses.map( e =>
<Cards
id={e.id}
title={e.title}
description={e.description}
image={e.image}
price={e.price}
key={e.id}
/>) : null
}
</div>

First time using react. How to get rss items into a component?

This is the first time I am using react. I am coming from jQuery to React this feels like a big jump. If anybody can help me refactor this to work the React way I will be forever in your debt! :)
I am trying to parse an RSS feed, where I want to grab the most recent post title and link to render into a component.
https://www.npmjs.com/package/rss-parser - Using this to get the parser.
When viewing my app in the browser the async function is spitting out the rss feed into the console, which is a good start I guess!
// src/App/index.tsx
import * as React from 'react';
import * as Parser from 'rss-parser';
// Types
import { string } from 'prop-types';
let parser = new Parser();
// blueprint for the properties
interface Props {
name: string;
}
// Component state
interface State {
//feed: any[];
}
(async () => {
let feed = await parser.parseURL('https://www.reddit.com/.rss');
console.log(feed.title);
feed.items.forEach((item: { title: string; link: string; }) => {
console.log(item.title + ':' + item.link)
});
})();
export default class App extends React.Component<Props, State> {
render() {
return (
<div>
<h1>RSS Feed</h1>
<div>
<h1>item.title</h1>
item.link
</div>
</div>
);
}
}

If I understand you right, you need something like this:
export default class App extends React.Component<Props, State> {
constructor(props: {}) {
super(props);
this.state = { feed: [] };
}
async componentDidMount() {
const feed = await parser.parseURL('https://www.reddit.com/.rss');
this.setState({ feed });
}
render() {
return (
<div>
<h1>RSS Feed</h1>
this.state.feed.map((item, i) => (
<div key={i}>
<h1>item.title</h1>
item.link
</div>
))
</div>
);
}
}

I faced the same problem and solved by this. if you don't check for "undefined" value. It will show you error because react renders page 2 times and you have an undefined array of feed.items in your hand when in first render.
My index.js file:
import React from 'react'
import {render} from 'react-dom';
let Parser = require('rss-parser');
let parser = new Parser();
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/";
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
feed: []
};
}
async componentDidMount() {
const feed = await parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss');
this.setState(feed)
}
render() {
return (
<div>
<h1>Blog Posts</h1>
{this.state.items && this.state.items.map((items, i) => (
<div key={i}>
<h1>{items.title}</h1>
{items.link}
</div>
))}
</div>
);
}
}
render(
<App />,
document.getElementById("root")
)

React: Context to pass state between two hierarchies of components

I am developing a website in which I want to be able to access the state information anywhere in the app. I have tried several ways of implementing state but I always get following error message:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 SOS.
Here is my SOS->index.js file:
import React, { useContext } from 'react';
import axios from 'axios';
import CONST from '../utils/Constants';
import { Grid, Box, Container } from '#material-ui/core';
import { styled } from '#material-ui/styles';
import { Header } from '../Layout';
import ListItem from './ListItem';
import SOSButton from './SOSButton';
import FormPersonType from './FormPersonType';
import FormEmergencyType from './FormEmergencyType';
import StateContext from '../App';
import Context from '../Context';
export default function SOS() {
const { componentType, setComponentType } = useContext(Context);
const timerOn = false;
//'type_of_person',
const ambulance = false;
const fire_service = false;
const police = false;
const car_service = false;
//static contextType = StateContext;
const showSettings = event => {
event.preventDefault();
};
const handleComponentType = e => {
console.log(e);
//this.setState({ componentType: 'type_of_emergency' });
setComponentType('type_of_emergency');
};
const handleEmergencyType = new_emergency_state => {
console.log(new_emergency_state);
// this.setState(new_emergency_state);
};
const onSubmit = e => {
console.log('in OnSubmit');
axios
.post(CONST.URL + 'emergency/create', {
id: 1,
data: this.state //TODO
})
.then(res => {
console.log(res);
console.log(res.data);
})
.catch(err => {
console.log(err);
});
};
let component;
if (componentType == 'type_of_person') {
component = (
<FormPersonType handleComponentType={this.handleComponentType} />
);
} else if (componentType == 'type_of_emergency') {
component = (
<FormEmergencyType
handleComponentType={this.handleComponentType}
handleEmergencyType={this.handleEmergencyType}
emergencyTypes={this.state}
timerStart={this.timerStart}
onSubmit={this.onSubmit}
/>
);
}
return (
<React.Fragment>
<Header title="Send out SOS" />
<StateContext.Provider value="type_of_person" />
<Container component="main" maxWidth="sm">
{component}
</Container>
{/*component = (
<HorizontalNonLinearStepWithError
handleComponentType={this.handleComponentType}
/>*/}
</React.Fragment>
);
}
I would really appreciate your help!
Just for reference, the Context file is defined as follows:
import React, { useState } from 'react';
export const Context = React.createContext();
const ContextProvider = props => {
const [componentType, setComponentType] = useState('');
setComponentType = 'type_of_person';
//const [storedNumber, setStoredNumber] = useState('');
//const [functionType, setFunctionType] = useState('');
return (
<Context.Provider
value={{
componentType,
setComponentType
}}
>
{props.children}
</Context.Provider>
);
};
export default ContextProvider;
EDIT: I have changed my code according to your suggestions (updated above). But now I get following error:
TypeError: Cannot read property 'componentType' of undefined

Context is not the default export from your ../Context file so you have to import it as:
import { Context } from '../Context';
Otherwise, it's trying to import your Context.Provider component.
For your file structure/naming, the proper usage is:
// Main app file (for example)
// Wraps your application in the context provider so you can access it anywhere in MyApp
import ContextProvider from '../Context'
export default () => {
return (
<ContextProvider>
<MyApp />
</ContextProvider>
)
}
// File where you want to use the context
import React, { useContext } from 'react'
import { Context } from '../Context'
export default () => {
const myCtx = useContext(Context)
return (
<div>
Got this value - { myCtx.someValue } - from context
</div>
)
}
And for godsakes...rename your Context file, provider, and everything in there to something more explicit. I got confused even writing this.

Error when I was trying to render a map of items

I am trying to figure out where my error is in my react js page
I have tried different things like changing it into a state component, return and render statements, etc. But its still giving me
"TypeError: Cannot read property 'map' of undefined
Recipes
src/components/Recipes.js:4
1 | import React from "react";
2 |
3 | const Recipes = (props) => (
4 |
5 | { props.recipes.map((recipe)=> {
6 | return (
7 |
View compiled"
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import InputForm from "./components/InputForm";
import Recipes from "./components/Recipes"
const API_KEY= "mykey";
class App extends Component {
state= {
recipes: []
}
getRecipe = async (e) => {
e.preventDefault();
const recipeName = e.target.elements.recipename.value;
const api_call = await fetch(`https://www.food2fork.com/api/search?key=${API_KEY}&q=${recipeName}&page=2`)
const data = await api_call.json();
this.setState({ recipes: data.recipes });
}
render() {
return (
<div className="App">
<header className="App-header">
React Cookbook
</header>
<InputForm getRecipe={this.getRecipe} />
<Recipes recipes={this.state.recipes} />
</div>
);
}
}
export default App;
Recipes.js
import React from "react";
const Recipes = (props) => (
<div>
{ props.recipes.map((recipe)=> {
return (
<div key={recipe.recipe_id }>
<img src={recipe.image_url} alt={recipe.title}/>
<h3>{ recipe.title }</h3>
</div>
)
})}
</div>
)
export default Recipes;

As Andrew notes in the comments, it sounds like the response from the server is undefined, and that's what is getting added to the recipes state object. You can check for this in the console. Are your API key and recipe name valid, for example? Are you accessing the correct part of the returned data?
As an aside, recipes in state is empty on the first render. You need to check for that possibility in your code. Here I've simply returned an empty div, but you could add a loading spinner or something there instead to provide useful feedback to the user.
render() {
const { recipes } = this.state;
if (!recipes.length) return <div />;
return (
<div className="App">
<header className="App-header">
React Cookbook
</header>
<InputForm getRecipe={this.getRecipe} />
<Recipes recipes={recipes} />
</div>
);
}

ReactJS - cannot read property 'props' of undefined

I am practicing React native. When I compile the following program, I am getting Cannot read property 'props' of undefined error for Details.js. Kindly let me know as to what went wrong here.
Layout.js
import React, {Component} from 'react';
import Header from './Header';
import Details from './Details';
export default class Layout extends React.Component {
constructor(props){
super(props);
this.state = {
heading: "Welcome no-name guy!",
header: "I am your header",
footer: "I am your footer"
};
}
render() {
return (
<div>
<Header headerprop={this.state.header} />
<Details detailprop={this.state.heading} />
</div>
);
}
}
Details.js
import React from 'react';
const Details = (detailprop) => {
return (
<div className="heading-style">{this.props.detailprop}</div>
);
};
Details.bind(this);
export default Details;
Header.js
import React, {Component} from 'react';
export default class Header extends React.Component {
render(){
return(
<div>{this.props.headerprop}</div>
);
}
}

In functional components, the props are passed as the first parameter. So, you only need to do this:
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
If you know the prop that you want to handle you can destructure that prop:
const Details = ({ detailProp }) => {
return (
<div className="heading-style">{detailprop}</div>
);
};

Your component argument should be props:
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
It could be detailprop as you have (or anything for that matter) but you would then need to access the prop by the confusing call:
detailprop.detailprop
props is the idiomatic approach for React.

Details.js is a stateless functional react component. https://facebook.github.io/react/docs/components-and-props.html
It receives props as its argument. You don't need this here.
import React from 'react';
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
Details.bind(this); // you don't need this
export default Details;
Also, div elements will not work for react-native . Please refer react native docs https://facebook.github.io/react-native/