Develop Reference

How to call a component inside a custom component in React?

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>

take out name of dynamically created cards react

I had created some cards from an array of objects, now I want to show popup data for each card differently.
here is my code of printing
{data.carData.map( single=>(<li>{ <div onClick={handleClick}><Card single={single}/></div>} </li>))}
for this, I want the card name onClick event, but when I pass anything in the handleClick react throw an error of too many re-renders.
if I do the same onClick event inside the card component and log it prints all the cards names one by one
here is what is inside the card:
function Card({single}) {
const [flowName, setflowName] = useState();
const handleClick=(e)=>{
setflowName(e);
return
}
console.log("loging name:",flowName);
return (
<div className="main mb-2 z-0" onClick={handleClick(e=>single?.flowName)} >
<div className=" inner_main_container pt-4 px-8 bg-white shadow-lg rounded-lg ">
<div className="flex justify-between">
<div className="flex flex-row align-center">
</div>
{single?.badge.map(badge=>(
<div className={"badge"} key={badge}>
<span className={badge==="Growth"?" badgeClrG":(badge==="Content"?"content":"badgeClrO")} key={badge}>{badge}</span>
</div>
) )}
</div>
<div className="flex justify-center">
<img src={single?.image} alt={single?.flowName} />
</div>
<div >
<div className={"mt-2 flex justify-center"}>
<h1>{single?.flowName}</h1>
</div>
</div>
</div>
</div>
) } export default Card

I suspect you're doing this when you're trying to pass a value:
single=>(<li>{ <div onClick={handleClick(value)}><Card single={single}/></div>} </li>))}
Every time this is rendered, the function is invoked straight away, which causes another render and so on...
The solution is to wrap your handleClick call in another function:
single=>(<li>{ <div onClick={()=>handleClick(value)}><Card single={single}/></div>} </li>))}

I don't want to create another db table to filter who is team and who is friend, please help me

I don't want to creater another table called friends at strapi and link it again to visual studio code, so I have a Characters table for all team and friends. So I want to input only new data at Characters , but filter it to know which one is friend or team. So I've tried to make a function for it to know's which is a friend, that I've determined with if you have only start date your a team if you have both start and end date you are friend. The source code at the file is this:
import Head from 'next/head'
import Layout from '../../components/Layout'
import styles from '../../styles/Home.module.css'
import fetchFromCMS from '../../lib/service';
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
export async function getStaticProps() {
const characters = await fetchFromCMS('characters');
return {
props: { characters},
revalidate: 1,
};
}
function sortByDate(a , b){
return new Date(a.StartDate) - new Date(b.StartDate);
}
function isFirend(a ){
var bool = true;
new Date(a.EndDate) != null? bool = true : bool= false;
return bool ;
}
const charactersItem = ({ characters }) => {
return (
<Layout>
<div className={styles.container}>
<Head>
<title>Characters</title>
</Head>
<main className={styles.main} id="page-top">
{/*///Team*/ }
<section className="bg-light page-section">
<div className="container">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading text-uppercase">Our Amazing Team</h2>
<h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
</div>
</div>
<div className="row">
{characters.sort().map((character) => (
<div className="col-sm-4">
<a href={`/Team/${character.Slug}`}>
<div className="team-member">
<img className="mx-auto rounded-circle" src={character.Image.url} alt=""></img>
<h4 className="text-muted">{character.PaineapleName}</h4>
</div>
</a>
</div>
))
}
</div>
</div>
</section>
{/*//friends*/}
{ <section className="bg-light page-section">
<div className="container">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading text-uppercase">Our Amazing Friends</h2>
<h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
</div>
</div>
<div className="row">
{characters.sort(character.EndDate).map((character) => (
<div className="col-sm-4">
<a href={`/Team/${character.Slug}`}>
<div className="team-member">
<img className="mx-auto rounded-circle" src={character.Image.url} alt=""></img>
<h4 className="text-muted">{character.PaineapleName}</h4>
</div>
</a>
</div>
))
}
</div>
</div>
</section> }
</main>
</div>
</Layout>
)
};
export default charactersItem;
The results aren't what I've expected because and the error it shows is this one:
I try other solutions and the only way I did something nearby the objective it duplicated, I mean with this, it duplicated the info instead of filter which one is friend.

character.endDate is not a compare function. It's possible Characters is the issue but you should isolate each issue one by one to troubleshoot.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

How to render component children at parent

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>

ReactJS randomly returns empty script rather than content

I'm having a weird issue using ReactJS, and React Router. I have my main App returning some basic HTML, which loads on the page fine:
App.routes = (
<Router.Route name="app" path="/" handler={App.App}>
<Router.DefaultRoute handler={App.Matches} />
</Router.Route>
);
---
App.App = React.createClass({
render: function () {
return (
<div>
<App.NavBar />
<div className="ui page grid">
<div className="four wide column">
One
</div>
<div className="eight wide column">
Two
</div>
<div className="four wide column">
Three
</div>
</div>
<Router.RouteHandler/>
</div>
);
}
});
The NavBar component loads fine, along with the HTML. However, I expect the Router to now load the default handler App.Matches:
App.Matches = React.createClass({
render: function() {
return (
<div>
Content
</div>
);
}
});
As far as I can see, this should work. However, when rendered, I just get an empty script tag below the ` div like so:
<script data-reactid=".0.2"></script>
Anyone know why? Really confusing me.