React Props complete guide for beginners

import React from "react";import Children from "./Children";import "../../stylesheets/Part1/Parent.css"const Parent = () => {  const card = (title) => (    <div className="card">      <img        src="https://i2.wp.com/sleepingshouldbeeasy.com/wp-content/uploads/2019/12/gross-motor-activities-for-1-year-olds-3.jpg"        alt=""      />      <button>{title}</button>    </div>  );  return (    <>      <div className="container">        <h1>Showing childrens</h1>        <br />        <div className="cards">        <Children childcard={card("Child")} />        </div>      </div>    </>  );};export default Parent;

import React from 'react'const Children1 = (props) => {  return (    props.childcard  )}export default Children1

import React, { useState } from "react";import "../../stylesheets/Part2/Parent.css";import Children from "./Children";const Parent = () => {  const [dark, setdark] = useState(false);  const tooglemode = () => {    dark ? setdark(false) : setdark(true);  };  const darkmode = (    <i      className={        !dark          ? "fa-solid fa-moon toogle-active"          : "fa-solid fa-moon toogle-inactive"      }      onClick={tooglemode}    />  );  const lightmode = (    <i      className={        dark          ? "fa-solid fa-sun toogle-active"          : "fa-solid fa-sun toogle-inactive"      }      onClick={tooglemode}    />  );  return (    <div className={dark ? "application dark" : "application light"}>      <div className="buttoncontroller">        <h1>Website</h1>        <div className="toogle">          {darkmode}          {lightmode}        </div>      </div>      <Children dark tooglemode={tooglemode} />    </div>  );};export default Parent;

import React from "react";import illustrator from "../../assets/images/illustrator.svg";const Children = ({ dark, tooglemode }) => {  return (    <div className="section">      <img src={illustrator} alt="" />      <div className="sidebar">        <h1>Welcome</h1>        <p>          Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate          quod cum quibusdam rerum quis repellat consequuntur nesciunt deserunt.          Voluptates aut eaque sed rerum dolorem alias quia! Quo magni hic odio          exercitationem ratione.        </p>        {dark ? (          <button            onClick={tooglemode}            className="light"            style={{ border: "2px solid black" }}          >            Dark Mode          </button>        ) : (          <button onClick={tooglemode} className="dark">            Light Mode          </button>        )}      </div>    </div>  );};export default Children;

import React, { useState } from "react";import "../../stylesheets/Part3/Parent.css";import Children1 from "./Children1";import Children2 from "./Children2";const Parent = () => {  const [show, setshow] = useState(true);  const [count, setcount] = useState([1]);  const toogle = () => {    show ? setshow(false) : setshow(true);  };  const maintaincount = (event) => {    event.target.id === "add"      ? setcount([...count, count[count.length] + 1])      : setcount(count.slice(0, -1));  };  return (    <div className="application-container">      <div className="header">        <button onClick={maintaincount} id="add">          Add        </button>        <button onClick={maintaincount} id="delete">          Delete        </button>      </div>      <div className="section-application">        <Children1 show toogle={toogle} />        <Children2 count={count} show />      </div>    </div>  );};export default Parent;

import React from 'react'const Children1 = ({toogle}) => {  return (    <div className="section1">        <h1>Control Text Visibility</h1>        <button onClick={toogle}>Toggle</button>    </div>  )}export default Children1

import React from "react";const Children2 = (props) => {  console.log(props.show);  return (    <div className="section2">      {props.show ? (        props.count.map((ele) => {          return (            <div className="section2-application" key={ele}>              <h1>Sample Text</h1>              <p>                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure,                ratione necessitatibus officia asperiores quia quaerat                aspernatur est dignissimos corrupti ullam qui sapiente dolorum                aliquid!              </p>            </div>          );        })      ) : (        <div>Activate show to view the list</div>      )}    </div>  );};export default Children2;