I need to pass prop called name from one React component to another, but something goes wrong. Could you tell me how to do it right?
Thanks in advance
import React from 'react';
export class Greeting extends React.Component {
render() {
return (
<h1>Hello World and {this.props.name}</h1>
)
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting name='Alex' />;
<h2> Welcome, {Greetings.props.name} </h2>
</div>
);
}
export default App;
two things:
looks like you are mixing class and functional components, i recommend going for functional as its more common now. in that case the Greeting will look like this:
export function Greeting(props) {
return (
<h1>Hello World and {props.name}</h1>
)
}
you are passing the prop the the component, but you cant access it from its parent. you can create another variable for that:
const greetingName = "Alex";
function App() {
return (
<div>
<Greeting name={greetingName} />;
<h2> Welcome, {greetingName} </h2>
</div>
);
}
In Greeting.js you have missed parameter
App.js
import React, { useState } from 'react';
import Greeting from './Greeting';
const App = () => {
const [name, setName] = useState("")
return (
<div>
<Greeting name="Alex" />
</div>
)
}
export default App
Greeting.js
import React from 'react'
const Greeting = (props) => {
return (
<div>
<h1>Hello World and My name is {props.name}</h1>
</div>
)
}
export default Greeting
Related
Why does the React tab in my browser hang when visualizing these components? What am I doing wrong? I just want to transfer the text to another component using Provider and Consumer.
Menu component:
import React, {PureComponent, createContext} from 'react'
import { Link } from "react-router-dom";
import './menu.scss';
import ShoppingBasket from '../shoppingBasket/shoppingBasket.js';
const UserContext = React.createContext({})
export const UserProvider = UserContext.Provider
export const UserConsumer = UserContext.Consumer
export default class Menu extends PureComponent {
render() {
return (
<div className="head">
<nav>
<Link to="/">Home</Link>
<Link to="/aboutus">About Us</Link>
</nav>
<UserProvider username={`name`}>
<ShoppingBasket />
</UserProvider>
</div>
)
}
}
ShoppingBasket component:
import React, {PureComponent} from 'react'
import UserProvider from '../menu/menu.js';
import UserConsumer from '../menu/menu.js';
export default class ShoppingBasket extends PureComponent {
render() {
return (
<UserConsumer>
{context => {
return(
<div>
<h2>Profile Page of {context.username}</h2>
</div>
)
}}
</UserConsumer>
)
}
}
As per the React Context Api ,in Context Provider, data should be passed using the "value" prop , what you are doing it passing the username prop to the provider, what you should try is
<UserProvider value={`name`}>
<ShoppingBasket />
</UserProvider>
and while in the consumer
<UserConsumer>
{value => {
return(
<div>
<h2>Profile Page of {value}</h2>
</div>
)
}}
</UserConsumer>
I am working on a React project, In my project I have four components those are App, Componentc,
Componente, Componentf. Now I am trying to pass an Array from App to Componentf using Context API
I successfuly passed an Array, but the problem is in output the Array is showing like side by
side. but what I am expecting it has to show like Unordered list in html
Please help me to acheive this
This is App.js
import React from 'react';
import Componentc from './Componentc/Componentc';
// import './App.css';
export const UserContext = React.createContext()
const fruits = ['Apple','Orange','Banana','Grapes']
function App() {
return (
<div className="App">
<UserContext.Provider value={fruits}>
<Componentc></Componentc>
</UserContext.Provider>
</div>
);
}
export default App;
This is Componentc
import React from 'react';
import './Componentc.css';
import Componente from '../Componente/Componente';
const Componentc = () => {
return(
<Componente></Componente>
)
}
export default Componentc
This is Componente
import React from 'react';
import './Componente.css';
import Componentf from '../Componentf/Componentf';
const Componente = () => {
return(
<Componentf></Componentf>
)
}
export default Componente
This is Componentf
import React from 'react';
import './Componentf.css';
import { UserContext } from '../App'
const Componentf = () => {
return (
<div>
<UserContext.Consumer>
{
user => {
return <div className='d-block'>{user}</div>
}
}
</UserContext.Consumer>
<h1>Component F</h1>
</div>
)
}
export default Componentf
The value of your context is an array, but you are treating it like an object in the context consumer.
You only need to change return <div className='d-block'>{user}</div> by :
{user => {
return user.map(t => (
<div key={t} className="d-block">
{t}
</div>
));
}}
Although your variables should have meaningful names; I recommend changing the name of the user context and variable to be fruits.
Also, If you are using a recent react version (> 16.8), I also recommend that you use React.useContext API to receive values from context, code become more readable.
const Componentf = () => {
const fruits = React.useContext(FruitContext);
return (
<div>
{fruits.map(fruit => (
<div key={fruit} className="d-block">
{fruit}
</div>
))}
<h1>Component F</h1>
</div>
);
};
Here is a codesandbox demo
Is it at all possible to use react-dom's render more than once in a react spa, in particular in a nested child component? For example:
index.jsx:
import React from 'react';
import { render } from 'react-dom';
import sampleComponent from './sampleComponent';
render(<SampleComponent />, document.getElementById('app'));
sampleComponent.jsx:
import React from 'react';
import { render } from 'react-dom';
const SampleComponent = () => (
<div>
<h1>hello world</h1>
<div id="foo" />
</div>
);
export default SampleComponent;
render(<h1>it's me again</h1>, document.getElementById('foo'));
To use render more than once is a complicated way.
You don't need that.
You already create a valid component. Just wrap it into another and use more then once. En example:
const SampleComponent = () => (
<div>
<h1>hello world</h1>
<div id="foo" />
</div>
);
const WrapperComponent = () => (
<div>
<SampleComponent />
<SampleComponent />
</div>
);
export default WrapperComponent;
I'm trying to insert a child component inside another child component, but my code is not working. Following codes are the structure i'm trying to build.
const AddProductPage= () => {
return (
<PageTemplate>
<ProductTemplate>
<AddProduct />
</ProductTemplate>
</PageTemplate>
);
};
const PageTemplate= ({children}) => {
return (
<div className={cx('pagetemplate')}>
<HeaderContainer />
<main>
{children}
</main>
<Footer />
</div>
);
};
class ProductTemplate extends Component {
render() {
return (
<div className={cx('product-template')}>
...
<div className={cx('display')}>
{this.props.children}
</div>
</div>
);
}
}
class AddProduct extends Component {
render() {
return (
<div className={cx('addproduct')}>
addproduct
</div>
);
}
}
I'm trying to insert AddProduct component in ProductTemplate component as a child, which is inserted in PageTemplate component as a child. AddProductPage, however, is not showing AddProduct component. I'd be grateful if anyone can help.
I've run your code. May be you'r missing default export statements.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import AddProductPage from './AddProductPage';
ReactDOM.render(<AddProductPage />, document.getElementById('root'));
AddProductPage.js
import React from 'react';
import PageTemplate from './PageTemplate';
import ProductTemplate from './ProductTemplate';
import AddProduct from './AddProduct';
const AddProductPage= () => {
return (
<PageTemplate>
<ProductTemplate>
<AddProduct />
</ProductTemplate>
</PageTemplate>
);
};
export default AddProduct;
PageTemplate.js
import React from 'react';
const PageTemplate= ({children}) => {
return (
<div>
<main>
{children}
</main>
</div>
);
};
export default PageTemplate;
ProductTemplate.js
import React,{Component} from 'react';
class ProductTemplate extends Component {
render() {
return (
<div>
<div>
{this.props.children}
</div>
</div>
);
};
};
export default ProductTemplate;
AddProduct.js
import React, {Component} from 'react';
class AddProduct extends Component {
render() {
return (
<div>
addproduct
</div>
);
};
};
export default AddProduct;
Output is this :
addproduct
Here`s a Fiddle of your code
Works Fine!. I have removed cx API. I suppose the problem might be with className resolution. Check in the dom hierarchy weather the Children DOM Node exists and they have received their respective classnames.
const PageTemplate= ({children}) => {
return (
<div className={'pagetemplate'}>
<HeaderContainer />
<main>
{children}
</main>
<Footer />
</div>
);
};
I have two js files Child.js and App.js.
Child.js
import React from 'react';
const Child = (props) =>{
<div>
<button onClick={props.doWhatever}>{props.title}</button>
</div>
}
export default Child;
App.js
import React, { Component } from 'react';
import './App.css';
import Child from './components/parentTochild/Child.js'
class App extends Component {
state = {
title : 'Helloooo'
}
changeWorld = (newTitle) => {
this.setState = ({
title : newTitle
});
}
render() {
return (
<div className="App">
<Child doWhatever={this.changeWorld.bind(this , 'New world')} title={this.state.title}/>
</div>
);
}
}
export default App;
While executing this code I'm getting the error mentioned in the title. I have tried to solve it. But I couldn't figure out what's the problem with this code.
When I removed <Child doWhatever={this.changeWorld.bind(this , 'New world')} title={this.state.title}/> and typed a text it showed on screen. The problem is when using the Child component.
You should return some thing from child component.
import React from 'react';
const Child = (props) =>{
return (
<div>
<button onClick={(event)=>props.doWhatever('New world')}>{props.title}</button>
</div>
);
}
export default Child;
Updated:
If you want to send a text with the event handler to you can do this :
import React, { Component } from 'react';
import './App.css';
import Child from './components/parentTochild/Child.js'
class App extends Component {
constructor(props){
super(props);
this.state={
title : 'Helloooo'
};
this.changeWorld=this.changeWorld.bind(this);
}
changeWorld = (newTitle) => {
this.setState = ({
title : newTitle
});
}
render() {
return (
<div className="App">
<Child doWhatever={this.changeWorld} title={this.state.title}/>
</div>
);
}
}
export default App;