I want to change the body dynamically, how can i do this?
import React from 'react'
// import { Link } from 'react-router-dom'
export default function ProjectTemplate(props) {
const Css= {
"--background":`${props.isValue ? props.mode : 'red'}`
}
return (
<>
<div className="bodyCon projectCon">
<div className="bodyComponent">
<div className="aboutHeading projectHeading" style={Css}>
<h1>{props.name}</h1>
<div className="container">
<div className="projects">
</div>
</div>
</div>
</div>
</div>
</>
)
}
this is a custom component
import React from 'react'
import ProjectTemplate from '../Projects/ProjectTemplate/ProjectTemplate'
export default function Blog(props) {
return (
<>
<ProjectTemplate name='Blog' mode={props.mode} isValue={props.isValue} >
hhhh
</ProjectTemplate>
</>
)
}
this is the another component where i want to add the body of previous component dynamically, then the hhh is not display in browser
output in browser:
<div className="bodyCon projectCon">
<div className="bodyComponent">
<div className="aboutHeading projectHeading" style={Css}>
<h1>{props.name}</h1>
<div className="container">
<div className="projects">
hhh
</div>
</div>
</div>
</div>
</div>
but hhh is not visible in browser, how can i do for this output
You should read this docs, all you need here is children props
The word hhh will not be displayed because you are calling the custom component in the project template with no props name which you want to display. In your code if you render the component the Blog name will displayed only.
use this in the project template and pass the props to the childrenanme
<div className="projects">
{props.childrenanme}
</div>
To Answer your Question: Yes we can use component inside nested component in react.
In JSX expressions that contain both an opening tag and a closing tag,
the content between those tags is passed as a special prop React Documentation.
And to use these special props you have to use {props.children}.
In your example, you have passed the content b/w opening and closing tag of a custom component but forgot to use it.
In projectTemplate component use the children that you have passed while invoking the component, like this:
<div className="projects">
{props.childrenanme}
</div>
Related
I am making a cart and when I click Add to cart then the number of times increases this is done using hooks and is in the following Pricetag.jsx
import React from 'react'
import './Body.css'
import { useState } from 'react'
// import './Cart.js'
export default function Pricetag(props) {
const [count, setCartCount] = useState(0);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
Now I want to use the value of count in other jsx,
import React from 'react'
import './Body.css'
import image2 from './assets/cake9.jpeg'
import image9 from './assets/cake16.jpeg'
import Pricetag from './Pricetag'
export default function Body(props) {
return (
<>
<div className="headingbody">
<div></div>
{props.title}
</div>
<div className="cart">
<div className="number34"> ** here I want to show my count **</div>
<i class="fa-solid fa-cart-shopping"></i>
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image10} name="Swimming cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image11} name="Rossy cake" bold="Rs 345" cut="Rs 634" />
</div>
</>
)
}
Can you tell me how can I use the value of count from the first to the second?
There are a few ways you can use:
state management: redux, zustand,...
using React Context
you can pass the value through props but it will cause 'hell props'
You have to pass the count state to the other JSX file (component). There are some ways:
Import the JSX file and call the component inside Pricetag.jsx, then pass count as a prop.
If you are unable to use the component inside Pricetag.jsx, then Use state management solutions like Context API, Redux, MobX etc.
brother, you can find the description and idea from the below document of useContext API calling and its functionaloty
https://www.geeksforgeeks.org/reactjs-usecontext-hook/
https://reactjs.org/docs/hooks-reference.html#usecontext
In my vue application, i am using slots for some block of contents. Now, i have to migrate my application into react. While exploring react, i got to know props.children will work similar as slot works.
But, i am not sure what will be the proper way to use this pattern in react.
Here is the sample of code in vue
<template>
<div class="badge-box">
<span :class="badgeClass" :style="badgeStyle">
<span v-if="shape !=='dot'" class="line-break">
<slot>
{{text}}
</slot>
</span>
</span>
<span v-if="shape ==='dot'" class="line-break" style="margin-left: 8px;">
<slot name="dotShape">
{{text}}
</slot>
</span>
</div>
</template>
<script>
export default {
name:'sample'
props: {
text: { type: string }
}
}
</script>
How to change this vue slot pattern into React using props.children?
There are several patterns in React that correlate closely with Vue slots.
props.children can be used, but only for default slot with no slotProps. For named slot additional props can be used. Default slot content <slot>{{text}}</slot> can be conditionally rendered when no children are provided:
let MyComp = props => (
...
<div class="default-slot">{{props.children ?? props.text}}</div>
...
<div class="named-slot">{{props.named ?? props.text}}</div>
...
)
and
<MyComp named={<p>Named content</p>}>
<p>Default content</p>
</MyComp>
Function as child and function as prop patterns serve the same purpose but allow to replace slots with slotProps. A child can pass parameters to parent scope through a callback:
let MyComp = props => (
...
<div class="default-slot">{{props.children?.('foo') ?? props.text}}</div>
...
<div class="named-slot">{{props.named?.('bar') ?? props.text}}</div>
...
)
and
<MyComp named={param => <p>Named content {{param}}</p>}>{
param => <p>Default content {{param}}</p>
}</MyComp>
Assuming you are using JSX/TSX in functional React
const Component ({text}) => {
return (
<div class="badge-box">
<span :class="badgeClass" :style="badgeStyle">
<span v-if="shape !=='dot'" class="line-break">
{{text}}
</span>
</span>
<span v-if="shape ==='dot'" class="line-break" style="margin-left: 8px;">
{{text}}
</span>
</div>
)
}
will do what you want. If you are using class component, put it in the render method.
I would like to scroll to menu element in a page.
I have the menu component which is not a parent of components to which I would like to scroll.
I have found this post that describe a similar problem
Passing ref to a child We want the ref to be attached to a dom element, not to a react component. So when passing it to a child
component we can't name the prop ref.
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp> } ```
Then attach the ref prop to a dom element. ```jsx const ChildComp =
(props) => {
return <div ref={props.refProp} /> } ```
Here's my app structure
Menu component:
const MenuApp = () => {
return (
<div>
<div className="desktop-menu">
<div className="menu-item a-propos">
<p className='button'>Me découvrir</p>
</div>
<div className="menu-item competences">
<p className='button'>Compétences </p>
</div>
<div className="menu-item experiences">
<p className='button'>Experiences</p>
</div>
<div className="menu-item formation">
<p className='button'>Formation </p>
</div>
</div>
</div>
)
}
The parent is app component
<div className="App">
<div className="hero">
<HeaderApp />
<ApprochApp />
</div>
<Apropos />
<Competences />
<Experiences />
<Formation />
<Recom />
<Contact />
<Footer />
</div >
I would like that mu menus scrolls to the react components in the main App component
So how can I passe the reference from the menu component to the app and use it in components to scroll ?
I do not understand your problem completely though. However, one thing I can see from your question is that you're not forwarding the ref properly.
What you need in this case is forwardRef.
Basically, what you need to do is to create the childComponent as something like this:
const childComponent = React.forwardRef(({...otherProps}, ref) => {
return (<><div ref={ref}>Component content </div></>)
})
Where you need to use the component all you need to do is this:
const parentComponent = () => {
const reveiwsRef = React.useRef("");
return (
<div>
<childComponent ref={reviewsRef} />
</div>
);
}
You can find more info about this on the react documentation: Forwarding-Refs
I have hope this helps though
Header: I am trying to navigate to a new page from my Material UI button using the onClick method. I am confused about what to write in my handleClickSignIn function.
Code snippet from my Header.tsx file:
const HatsPage = () => (
<div>
<h1>
HATS PAGEHH
</h1>
</div>
)
function handleClickSignIn() {
<Route component= {HatsPage}></Route>
}
const Header = () => (
<div className = 'header'>‚
<h1 className = 'title'>
Instaride
</h1>
<div className="header-right">
<Button onClick= {handleClickSignIn}> Sign In</Button>
<Button> Contact</Button>
</div>
</div>
);
This doesn't work and I get errors like:
expected assignment or function but got expression instead
The problem you're having it that you're generating a Route component every time the Sign In button is clicked.
Instead, you should use a Link component like so:
const Header = () => (
<div className = 'header'>‚
<h1 className = 'title'>
Instaride</h1>
<div className="header-right">
<Link to={"/login"}> Sign In</Link>
<Button> Contact</Button>
</div>
</div>
This will create a link component that, when clicked, will direct to the /login URL. To then render components at that URL you'll also need to define a Route. You've already done this with but need to define the path like so:
<Route path={"/login"} component={HatsPage} />
And then note that this Route, your Header component and any Link's need to be nested within an instance of a BrowserRouter.
I'm familiar with ReactJS, but not with VueJS.
Where can I place the component children at the parent component.
I have this example in ReactJS, how can I create the same using VueJs:
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
What is the {props.children} in VueJS ??
The Vue analogy to the React "children" concept is the slots.
https://v2.vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots
https://v2.vuejs.org/v2/guide/components-slots.html
Slots can be used like:
// FancyBorder.vue
<div class="FancyBorder">
<slot/>
</div>
// App.vue
<FancyBorder>
Contents!
</FancyBorder>
Vue slots also have an advantage over the React children, as you can have multiple "groups" of elements, using named slots, this can make the code less reliant on "magic" classnames:
// FancyBorder.vue
<div class="FancyBorder">
<h1 className="Dialog-title">
<slot name="header"></slot>
</h1>
<slot/>
</div>
// App.vue
<FancyBorder>
<template slot="header">
Header
</template>
Contents!
</FancyBorder>