Hello basically I need to pass some data to a component to be able to popular that component:
const Data = {
name: "a",
title: "b"
};
export default function App() {
return (
<Div className="App">
<Card name={Data.name} title={Data.title} />
</Div>
);
}
my card componen The component I need to receive data:
const Card = ({ props }) => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.title}</p>
</div>
);
};
export default Card;
For some reason I am not getting these props on my card component
could someone help me with a solution to move props from a functional component to a functional component
example:
https://codesandbox.io/s/friendly-swanson-syuln
Your component declaration is wrong. You should only use brackets to destructure props, not for the entire props object.
const Card = (props) => {
just get rid of the curly braces around props in cards.js
import React from "react";
const Card = ( props ) => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.title}</p>
</div>
);
};
export default Card;
Related
I want to pass variable from parent component to props.children
Is posible if I access parent variable to props.children like this?
function App() {
return (
<div>
<Example>
<Example.Title>
<p>this is Title</p>
</Example.Title>
<Example.Body>
<p>this is Body</p>
<p>value from {parent}</p>
</Example.Body>
</Example>
</div>
);
}
export default App;
Parent Component
import { useState } from "react";
function Example(props) {
const [parent, setParent] = useState("parent");
return <div>{props.children}</div>;
}
Example.Title = (props) => <>{props.children}</>;
Example.Body = (props) => <>{props.children}</>;
export default Example;
You can't do it like this, because Example.Body component is already rendered when passed from App to Example.
Example must pass the "parent" prop to Example.Body
One solution is to use children as a render props (see it working there):
export default function App() {
return (
<div>
<Example>
{(parentParam) => (
<>
<Title>
<p>this is Title</p>
</Title>
<Body>
<p>this is Body</p>
<p>value from {parentParam}</p>
</Body>
</>
)}
</Example>
</div>
);
}
function Example(props) {
const [parent, setParent] = useState('parent');
return <div>{props.children(parent)}</div>;
}
I need some ideas for a folder structure/mental model in React.
I have an Item component. It stays the same.
It can be wrapped in either a Link with a URL prop or a Button with an onClick prop.
My current folder structure solution looks like this:
-Item
-wrapperComponents
-Link
-Button
Both the Link and Button components wrap around the children prop. Much like this:
react stuff ...
return(
<button onClick={props.handleOnClick}>
{props.children}
</button>
)
And this is how I call them:
<Button>
<Item />
</Button>
or
<Link>
<Item />
</Link>
I am looking for a better, more elegant solution.
I've tried sending the wrapper components to the Item but React doesn't allow to use them as a wrapper that would take children.
This is what you can do:
import "./styles.css";
import Item from "./Item";
import Wrapper1 from "./Wrapper1";
export default function App() {
return (
<div className="App">
<Item wrapper={Wrapper1} />
</div>
);
}
Item component:
const Item = ({ wrapper: Wrapper }) => {
return (
<Wrapper>
<div>This is my child</div>
</Wrapper>
);
};
export default Item;
Wrapper component:
const Wrapper1 = ({ children }) => {
return (
<div>
This is my wrapper
{children}
</div>
);
};
export default Wrapper1;
https://codesandbox.io/s/quirky-vaughan-4op2l1?file=/src/index.js
I've come up with this solution with the help you you guys
https://codesandbox.io/s/create-react-app-forked-wlmkyv?file=/src/App.js
Main component App.js:
import * as React from "react";
import Wrapper from "./components/Wrapper";
import Item from "./components/Item";
function App() {
return (
<div>
<Item wrapper={Wrapper} wrapperProps={{ color: "orange" }} />
</div>
);
}
export default App;
Item component Item.js:
import * as React from "react";
function Item(props) {
const Wrapper = props.wrapper;
const wrapperProps = props.wrapperProps;
return (
<Wrapper {...wrapperProps}>
<div>An Item</div>
</Wrapper>
);
}
export default Item;
Wrapper component Wrapper.js:
import * as React from "react";
function Wrapper(props) {
return (
<div style={{ backgroundColor: props.color || "red" }}>
{props.children}
</div>
);
}
export default Wrapper;
I have my card component, in which I need to pass another component into to display unique content for each different card. At the moment, I am passing the example component "Foot" in a ternary operator, but I also need to pass "Patio", "Fence" and "Deck", which relate to specific title props. I hope this all makes sense, here's my code -
import { useState } from "react";
import Foot from "../Footing";
const Card = (props) => {
const [showContent, setShowContent] = useState(false);
const contentClick = () => {
setShowContent(true);
};
return (
<div>
<h1>{props.job}</h1>
<button onClick={contentClick}>Calculate</button>
{showContent && <Foot />}
<hr></hr>
</div>
);
};
export default Card;
You can pass the component as prop to Card. React will render the component only if its name is in Pascal case, so renaming the content prop to Content
Card
const Card = ({content:Content,job}) => {
const [showContent, setShowContent] = useState(false);
const contentClick = () => {
setShowContent(true);
};
return (
<div>
<h1>{job}</h1>
<button onClick={contentClick}>Calculate</button>
{showContent && <Content />}
<hr></hr>
</div>
);
};
Usage
import Foot from "../Footing";
<Card content={Foot}/>
If you want to pass title prop to the Foot component,
Card
const Card = ({content,job}) => {
return
<>
{showContent && content}
</>
}
Usage
import Foot from "../Footing";
<Card content={<Foot title='foot-title'/>}/>
I am absolute beginner in react. I have to pass particular property to all the components inside the div without passing them into individual,
For Example, Instead of doing this:
function App() {
return (
<div>
<Component1 props = {propObject}/>
<Component2 props = {propObject}/>
<Component3 props = {propObject}/>
</div>
);
}
How can I achieve something like this? :
function App() {
return (
<div props={propObject}>
<Component1 />
<Component2 />
<Component3 />
</div>
);
}
React Context
provides a way to share values to child components without having to explicitly pass a prop through every level of the tree.
You need to import React.context from react
syntax:
// context.js
import React, { createContext } from "react"
export const MyContext = React.createContext(null);
Now You need to create a provider of this context, to pass the current context value to the tree below. So you need to wrap all of your child component by the React.Provider.
syntax:
// MainComponent.js
import { MyContext } from "./context"
import { ChildComponent1, ChildComponent2, ChildComponent3 } from "./childcomponent"
const MainComponent = () => {
const myObject = {name: "John"}
return (
<MyContext.Provider props={myObject}>
<ChildComponent1 />
<ChildComponent2 />
<ChildComponent3 />
</MyContext.Provider>
)
}
Now all the child component of this MainComponent has access of this props value which is provided by MyContext.Provider. Now you can simply get that values to your child components.
syntax:
// childcomponent.js
import React, { useContext } from "react"
import { MyContext } from "./context"
export const ChilcComponent1 = () => {
const props = useContext(MyContext)
return (
<p>
My name is: {props?.key}
</p>
)
}
You can use from ThemeProvider:
function App() {
return (
<ThemeProvider props = {propObject}>
<Component1 />
<Component2 />
<Component3 />
</ThemeProvider >
);
}
I am not very experienced with React but I have a very simple Setup.
export default function App() {
const [title, setTitle] = useState("still-empty");
const myFunction = title => {
setTitle(title);
};
return (
<div className="App">
<ComponentA myFunction={myFunction} />
<br />
<br />
<ComponentB title={title} />
</div>
);
}
const ComponentA = ({ myFunction }) => {
console.log("Rendering Component A");
return (
<div onClick={() => myFunction(Math.random() * 1000)}> Component A </div>
);
};
export default ComponentA;
const ComponentB = ({ title }) => {
return <div> Title : {title}</div>;
};
export default ComponentB;
Here is a sandbox to test this: https://codesandbox.io/s/musing-cookies-g7szr
See that if you click on "ComponentA", that exact ComponentA gets rerendered (you can see it in console) although no props are changed on this component. This is a simplified example of my real use case. In my real use case, ComponentA is a map where a lot of stuff (zoom, center)
will be reset. I want to prevent these resets and also the 1 second it takes for rerendering. Therefor I present this simplified example.
So how do I pass an information from ComponentA to ComponentB, without rerendering ComponentA itself? Thanks for helping out here.
use useCallback in Parent so that the function is not created again and again but only on initial render.
use React.memo so that when no props are changed the component wont re-render.
App
export default function App() {
const [title, setTitle] = useState("still-empty");
const myFunction = useCallback(title => {
setTitle(title);
}, []);
return (
<div className="App">
<ComponentA myFunction={myFunction} />
<br />
<br />
<ComponentB title={title} />
</div>
);
}
ComponentA
import React, { memo } from "react";
const ComponentA = ({ myFunction }) => {
console.log("Rendering Component A");
return (
<div onClick={() => myFunction(Math.random() * 1000)}> Component A </div>
);
};
export default memo(ComponentA);
Working demo is here:
https://codesandbox.io/s/affectionate-boyd-v7g2t?file=/src/App.js