We Keep Coding

Classes based on React.Component

New, new, new to React. Downloaded the following sample of setState method in classes that extend React.Component. It works fine, but I'm not understanding why no object needs to be instantiated for App, since each user could be in a different location...
I somehow thought index.js would need:
const app = new App()
Is there a reason for this?
index.js
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
constructor ( props ) {
super ( props );
this.state={ latitude: null};
window.navigator.geolocation.getCurrentPosition (
( postion ) => {
this.setState( {latitude: postion.coords.latitude })
},
( error ) => console.log ( error )
);
}
render () {
return (
<div className="App">
<header className="App-header">
<p>
LATITUDE: {this.state.latitude}
</p>
</header>
</div>
);
}
}
export default App;

Actually you do instanciate objects everytime you use a React component. You can translate const app = new App() by using <App/> in your code. In your case, one instance is in the ReactDOM.render function.

TypeError: pokemon.map is not a function

I've just started to learn react, I am trying to build a react app with the pokemon api and got the following error: TypeError: pokemon.map is not a function, I am not sure why the .map is not a function in js, does it have something to do with my extensions or the code below? Please help, thank you in advance!
App.js
import React, { useState } from 'react';
import PokemonList from './PokemonList'
function App() {
// eslint-disable-next-line
const [pokemon, setPokemon] = useState("pokemon-1", "pokemon-2")
return (
<PokemonList pokemon={pokemon}/>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
PokemonList.js
import React from 'react';
export default function PokemonList ({pokemon}) {
return (
<div>
{pokemon.map(p =>(
<div key={p}>{p}</div>
))}
</div>
);
}
Pagination.js
import React from 'react';
export default function Pagination() {
return (
<>
</>
);
}

You probably meant to make the default value of the pokemon be an array
const [pokemon, setPokemon] = useState(["pokemon-1", "pokemon-2"])
Notice the square brackets around the two string values ["pokemon-1", "pokemon-2"]

React Context Provider is not passing the values

I am just starting to learn Context and following a tutorial. Did exactly what Wes Bos did but still the state is not getting passed as expected to the Consumer.
TypeError: Cannot read property 'name' of undefined this error occurs
Already tried making functional components but the same thing happens
The Context component:
import React, {Component} from 'react';
const MyContext = React.createContext();
export default class MyProvider extends Component {
state = {
name: "John Doe",
age: 23,
};
render() {
return (
<MyContext.Provider value={this.state}>
{this.props.children}
</MyContext.Provider>
)
}
}
export const Consumer = MyContext.Consumer;
And the Person Component:
import React, {Component} from 'react';
import {Consumer} from '../Context.js'
export default class Person extends Component {
render() {
return (
<Consumer>
{
(value) => {
return (
<React.Fragment>
<p>I am inside the consumer {value.name} </p>
</React.Fragment>
)
}
}
</Consumer>
);
}
}
The expected output should be I am inside the Consumer John Doe
The error is this : TypeError: Cannot read property 'name' of undefined

The problem seems to be you're not actually calling the context provider component with the MyContext.Provider anywhere in your code.
I made a working example: https://codesandbox.io/s/sweet-dust-195sh
Here's another working example with your code: https://codesandbox.io/s/vigorous-monad-hecom
You forgot to call the MyContext component, as you need to pass the consumer children to it.
import React from "react";
import ReactDOM from "react-dom";
import MyContext from "./MyContext";
import Person from "./Person";
import "./styles.css";
function App() {
return (
<div className="App">
<MyContext>
<Person />
</MyContext>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Problem with exporting/importing React component

I'm trying to create a React component for a navigation bar.
This component I'd like to import from a separate file into my App.js.
Currently, the component should just return a simple 'Hello world' paragraph, but I have trouble getting this to work.
I have written the following code into a file located at src/components/navbar.js:
import React from 'react';
export default class navBar extends React.Component {
render() {
return (
<p>Hello world.</p>
)
}
}
Now I'd like to import this component from my src/App.js, which looks like this:
import React, { Component } from 'react';
import './App.css';
import navBar from './components/navbar.js'
class App extends Component {
render() {
return (
<navBar/>
);
}
}
export default App;
If I compile and open the site, nothing's there, which confuses me.
I'd be very thankful for any help!
EDIT:
It's been suggested that the problem is that <App /> is not being rendered anywhere. I don't believe that's the case, since there's another file being created by default (index.js), which looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I have also tried putting the paragraph (and the entire navbar) directly into src/App.js.
After compiling I could see the expected results in the browser, so the problem should lie with the exporting/importing.

In JSX, lower case tags are considered to be simple HTML/SVG elements. You can use lower case only if you use accessors (so with a dot like bla.blabla).
You can read about it here for example.
So in your case you must change the class name navBar to NavBar and then in the render method:
render() {
return (
<NavBar/>
);
}

Here is a full working example:
** Note: NavBar.js shoud start with a Capital letter.
App.js
import React from "react";
import ReactDOM from "react-dom";
import NavBar from "./components/NavBar";
function App() {
return (
<div className="App">
<NavBar />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
NavBar.js
import React from "react";
export default class NavBar extends React.Component {
render() {
return (
<div>
<p>Hello world.</p>
</div>
);
}
}

Immutable state not being loaded in redux-persist-immutable

I'm having an issue with redux-persist-immutable not rehydrating my store, and I'm not sure why it's happening. I'm using the "Delay Render Until Rehydration Complete" recipe from the base redux-persist docs. My exact code is here.
It looks like my app loads properly and everything is rendered properly, but my store.getState() returns the initialState I started with - immutable's Map() - instead of any of the values I worked with in the previous session. Am I missing something? I've added the relevant code below as well.
import React from 'react';
import { Component } from 'react';
import ReactDOM from 'react-dom';
import {compose, createStore} from 'redux';
import {getStoredState, persistStore, autoRehydrate, createPersistor} from 'redux-persist-immutable';
import {Provider} from 'react-redux';
import reducer from './reducer';
import WinTracker from './components/WinTracker';
// hotmodule reloading fix
if (module.hot) {
module.hot.accept();
}
require('./normalize.css');
require('./skeleton.css');
require('./style.css');
const store = createStore(reducer, undefined, autoRehydrate());
class AppProvider extends Component {
constructor() {
super()
this.state = { rehydrated: false }
}
componentWillMount() {
persistStore(store, {}, () => {
this.setState({ rehydrated: true })
})
}
render() {
if(!this.state.rehydrated){
return <div>Loading...</div>
}
return (
<Provider store={store}>
<WinTracker />
</Provider>
)
}
}
ReactDOM.render(
<AppProvider />,
document.getElementById('app')
);

Figures I'd figure out the answer mere minutes after posting the question.
Looks like the initialState needs to be set with the keys you'll be working with later. If your initialState is an empty Map() that then gets updated, you'll be SOL.