I want to pass my state value name to another component Context3.js without using props. I have use context api for creating context and through provider I have passed the value.
Now at Context3.js I am trying to consume it but at output screen I am unbale to see my output.
import './App.css';
import Context3 from './Components/Context3';
function App() {
return (
<div className="App">
<Context3/>
</div>
);
}
export default App;
The main component is App.js.
import React, {Component} from 'react';
export const MyContext = React.createContext();
class Context1 extends Component{
state={
name: 'mohammed'
}
render(){
return(
<div>
<MyContext.Provider value={this.state.name}>
</MyContext.Provider>
</div>
)
}
}
export default Context1;
import React, {Component} from 'react';
import { MyContext } from './Context1';
class Context3 extends Component{
render(){
return(
<div>
<MyContext.Consumer>
{
value => <h1> {value} </h1>
}
</MyContext.Consumer>
</div>
)
}
}
export default Context3;
strong text
You need to wrap your children with the ContextProvider (Context1)
import React, {Component} from 'react';
export const MyContext = React.createContext();
class Context1 extends Component{
state={
name: 'mohammed'
}
render(){
return(
<div>
<MyContext.Provider value={this.state.name}>
{this.props.children}
</MyContext.Provider>
</div>
)
}
}
export default Context1;
import './App.css';
import Context1 from './Components/Context1';
import Context3 from './Components/Context3';
function App() {
return (
<div className="App">
<Context1>
<Context3/>
</Context1>
</div>
);
}
export default App;
Related
Why is the UserContext default value has not changed even I specify a value in <UserContext.Provider>? How can I override the default value of the Context?
this is the App.jsx
import './App.css';
import React, { createContext } from 'react';
import ComponentB from './components/hooks/context/ComponentC';
function App() {
return (
<div className="App">
<ComponentB />
</div>
);
}
export default App;
this is the ComponentB
import React, { createContext, useState } from 'react';
import ComponentC from './ComponentC';
export const UserContext = React.createContext('default');
export const ChannelContext = React.createContext('default');
const provider = UserContext.Provider;
function ComponentB() {
return (
<div>
<provider value='Username'>
<ComponentC />
</provider>
</div>
);
}
export default ComponentB;
this is the ComponentC
import React from 'react';
import ComponentE from './ComponentE';
const ComponentC = () => {
return <ComponentE />;
}
export default ComponentC;
this is the ComponentE
import React, { Component, useContext } from 'react';
import { UserContext, ChannelContext } from './ComponentB';
const ComponentE = () => {
const username = useContext(UserContext);
const channel = useContext(ChannelContext);
return <div>username : {username} channel : {channel}</div>;
}
export default ComponentE;
In your App.jsx file, you say this:
import ComponentB from './components/hooks/context/ComponentC';
^ ^
Down the chain, this leads to this being rendered:
<div className="App">
<div>
username : {username} channel : {channel}
</div>
</div>
As you can see, there's no provider.
Even still, if we fix this one character typo, the issue persists.
This is because you say
const provider = UserContext.Provider;
...
<provider>
...
</provider>
which isn't allowed.
If you do
<UserContext.Provider>
...
</UserContext.Provider>
it works.
https://codesandbox.io/s/wizardly-andras-csxxy?file=/src/App.js
Regarding the first issue, this is why you should do
export const MyComponent = () => <></>;
import { MyComponent } from "./MyComponent";
instead of
const MyComponent = () => <></>;
export MyComponent;
import MyComponent from "./MyComponent";
I am learning react js.
I am unable to call countrypicker component inside cards component in app.js.
Can someone please help me?
This is my cards.js
import React from 'react';
import './Cards.css';
const Cards = () => {
return(
<div class="Cards">
<p>Cards</p>
</div>
);
}
export default Cards;
this is my countrypicker.js
import React from 'react';
import './CountryPicker.css';
const CountryPicker = () => {
return(
<div class='CountryPicker'>
<p>CountryPicker</p>
</div>
);
}
export default CountryPicker;
I am calling both components from App.js
import React,{ Component } from 'react';
import Cards from './components/Cards/Cards';
import Chart from './components/Chart/Chart';
import CountryPicker from './components/CountryPicker/CountryPicker';
import './App.css';
class App extends Component {
render(){
return (
<div className='App'>
<p className='p1' style={{color:'White'}}><b><u>Covid-19 tracker app</u></b></p>
<div>
<Cards>
<div><CountryPicker title="India"/></div>
</Cards>
</div>
</div>
);
}
}
export default App;
You need to pass children as a props to Cards, like this:
const Cards = ({ children }) => {
return(
<div class="Cards">
<p>Cards</p>
{children}
</div>
);
}
I am having problems in export a Context from a Component.
The component that holds the context is below.
import React, { Component, createContext} from 'react';
export const MyContext = React.createContext('');
export default class ComponentOne extends Component {
....
....
render(){
return(
<MyContext.Provider value={'value1'}>
<div>....</div>
</MyContext.Provider>
)
}
}
The component that wants to import the Context is below
import React, { Component} from 'react'
import { MyContext } from "../ComponentOne/Index.js"
export default class ComponentTwo extends Component{
render(){
console.log(this.props)
return(
<MyContext.Consumer>
</MyContext.Consumer>
)
}
}
The Error I'm getting is
TypeError: render is not a function
Context Provider requires a children.
<MyContext.Provider value={'value1'}>
<ComponentTwo />
</MyContext.Provider>
The context is available to MyContext.Provider children.
In your case, you need to render ComponentTwo within the provider, and as a consumer, read the value provided:
import React from 'react';
import ReactDOM from 'react-dom';
export const MyContext = React.createContext('');
class ComponentTwo extends React.Component {
render() {
return (
<MyContext.Consumer>{value => <div>{value}</div>}</MyContext.Consumer>
);
}
}
class ComponentOne extends React.Component {
render() {
return (
<MyContext.Provider value={'value1'}>
<ComponentTwo />
</MyContext.Provider>
);
}
}
ReactDOM.render(<ComponentOne />, document.getElementById('root'));
The error might be because of not reading the value inside the Context.Consumer.
Reference: Context API.
I am making a new app using new Context API. In MyProvider component I get an error:
undefined Provider.
So friends how I can achieve this MyContext? I created separate .js files and where should I place const MyContext = React.createContext();?
App.js
import React, {Component} from 'react';
import Calsi from './Calsi'
import MyProvider from './MyProvider'
const MyContext = React.createContext();
class App extends Component {
constructor() {
super();
window.MyContext = MyContext;
}
render() {
return (
<MyProvider>
<div>
<Calsi/>
</div>
</MyProvider>
);
}
}
export default App;
Calsi.js
import React, {Component} from 'react';
import Sum from './Sum'
export default class Calsi extends Component{
render() {
return (
<div>
<Sum/>
</div>
);
}
}
Sum.js
import React, {Component} from 'react';
const MyContext = window.MyContext;
export default class Sum extends Component {
render() {
return (
<div>
<MyContext.Consumer>
{(context) => (
<React.Fragment>
<p>a:{context.state.a}</p>
<p>b:{context.state.b}</p>
<p>Sum: {context.state.a + context.state.b}</p>
<button onClick={context.increaseA}>increment a</button>
</React.Fragment>
)}
</MyContext.Consumer>
</div>
)
}
}
Provider.js
import React, {Component} from 'react';
const MyContext = window.MyContext;
export default class MyProvider extends Component {
state = {
a: 0,
b: 20,
}
render() {
return (
<MyContext.Provider value={{
state: this.state,
increaseA: () => this.setState({
a: this.state.a + 1
})
}}>
{this.props.children}
</MyContext.Provider>
)
}
}
I am new in react so how I can do this correctly? Also I am using react 16.3.0 alpha2 version. Thanks for your help.
You have to export your context. Don't attach it to the window object of the browser (window.MyContext = MyContext).
Create a new file and name it MyContext.js.
export const MyContext = React.createContext();
Then import it in your Provider.js:
import { MyContext } from "./MyContext";
...
<MyContext.Provider value={...}>
Could someone point out what's wrong with this piece of code for rendering a component using React. It keeps throwing an error saying "Element type is invalid ... check render method for App" and I can't see the problem.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('container'));
APP
import React from 'react';
import AppActions from '../actions/app-actions';
import Catalog from './app-catalog';
export default class App extends React.Component {
render(){
return (
<div className="container">
<Catalog />
</div>
)
}
}
CATALOG
import React from 'react';
import AppStore from '../stores/app-store';
import CatalogItem from './app-catalog-item';
function getCatalog(){
return {items: AppStore.getCatalog()}
};
class Catalog extends React.Component {
constructor(){
super();
this.state = getCatalog();
}
render(){
let items = this.state.items.map(item => {
return <CatalogItem key={item.id} item={item} />
});
return (
<div className="row">
{items}
</div>
)
}
}
Any help would be much appreciated.
You just need to export default something in Catalog:
export default class Catalog extends React.Component {
...
Otherwise, when you use the import statement nothing will import:
import Catalog from './app-catalog';
Add export to Catalog
export default class Catalog extends React.Component {
}
because now from catalog there is nothing to import, and when you do
import Catalog from './app-catalog';
you will get undefined and undefined is not valid React component, that's why you get error