We Keep Coding

How to optimize React Component that's janky/laggy when changing onState

I'm trying to render a fast and clean change when rendering a React component. The child React component takes in an array of objects and an index as props to match with a specific object element in the array. One button has a different index that matches an object in the array, and once clicked, it will change that index and the child component displays the array object accordingly. On the Child component, there are if statements checking the length of an object in the array, and will render a different group of data displayed. The Parent react component re-renders when I click on a button, but the Child react component initially becomes laggy or janky when I re-render a new object. Once I click on all the buttons, the Child component renders without delay but will start delaying after spamming several clicks between each button. I've tried to wrap my React components with useMemo, useCallback for my functions, but I'm not quite sure if I used them properly.
Parent Component
import OurSolutionsData from "../OurSolutions/OurSolutionsData.js"
import {Card} from "../../Card.js";
import {Button, Container, Row, Col } from "react-bootstrap";
import "../OurSolutions/css/our-solutions.css";
function OurSolutions() {
const [infoCard, setInfoCard] = useState("Bookmaker");
const [buttonColor, setButtonColor] = useState("0");
const [indexdata, setIndexData] = useState(0)
const toggleButtonColor = useCallback((event) => {
setButtonColor(event.target.id);
console.log(event)
})
const toggleIndex = useCallback((index) => {
setIndexData(index)
})
const toggleInfoCard = useCallback((name, index) => {
setInfoCard(name);
setIndexData(index)
})
return (
<div className="our-solutions">
<Container className="our-solutions-container">
<Row className="os-header-container">
<p className="os-header">OUR SOLUTIONS</p>
<p className="os-header-2">Products suited to your needs</p>
<p className='os-header-text'>
No matter what your company focuses on, we have a <a className="solution-text">solution for you</a>.
</p>
</Row>
<div className="os-products">
<Row className="os-button-group">
<Button className={buttonColor === "0" ? "os-button-1": "os-button-2"} id="0" onClick={(e) => {
toggleButtonColor(e);
toggleInfoCard("Bookmaker", 0);
toggleIndex(0);
}}>
Bookmaker
</Button>
<Button className={buttonColor === "1" ? "os-button-1": "os-button-2"} key={1} id="1" onClick={(e) => {
toggleButtonColor(e);
toggleInfoCard("Tournament Organizer", 1);
}}>
Tournament Organizer
</Button>
<Button className={buttonColor === "2" ? "os-button-1": "os-button-2"} key={2} id="2" onClick={(e) => {
toggleButtonColor(e);
toggleInfoCard("Media Fan Engagement", 2);
}}>
Media Fan Engagement
</Button>
<Button className={buttonColor === "3" ? "os-button-1": "os-button-2"} key={3} id="3" onClick={(e) => {
toggleButtonColor(e);
toggleInfoCard("Daily Fantasy Sports", 3);
}}>
Daily Fantasy Sports
</Button>
</Row>
{infoCard === "Bookmaker" && <Card data={OurSolutionsData} indexData={indexdata}/>}
{infoCard === "Tournament Organizer" && <Card data={OurSolutionsData} indexData={indexdata}/>}
{infoCard === "Media Fan Engagement" && <Card data={OurSolutionsData} indexData={indexdata}/>}
{infoCard === "Daily Fantasy Sports" && <Card data={OurSolutionsData} indexData={indexdata}/>}
{console.log(OurSolutionsData)}
</div>
</Container>
</div>
)
}
export default memo(OurSolutions);
Child Component
import React, {useEffect , memo} from "react";
import { Col, Row} from "react-bootstrap";
import "../components/Home/OurSolutions/css/our-solutions.css";
export const Card = React.memo(({data, indexData}) => {
console.log("Re rendering!")
if (Object.keys(data[indexData][0]).length === 5) {
return (
<div className="cards">
{
data[indexData].map(item => (
<Row className="card-info-container" key={item.name}>
<Col className="card-icon-container">
<div className="card-icon-group">
<img src={item.image} className="pre_game_odds" loading="lazy"></img>
<p className="os-text-header">Pre-game odds</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
<div className="card-icon-group">
<img src={item.image_2} className="pick_em" loading="lazy"></img>
<p className="os-text-header">Pick em style games</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
</Col>
<Col className="card-icon-container">
<div className="card-icon-group">
<img src={item.image_3} className="micro_market" loading="lazy"></img>
<p className="os-text-header">In-game micromarkets</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
<div className="card-icon-group">
<img src={item.image_4} className="white_label" loading="lazy"></img>
<p className="os-text-header">White label solution</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
</Col>
</Row>
))
}
</div>
)
} if (Object.keys(data[indexData][0]).length === 4) {
return (
<div className="card-info-container">
{
data[indexData].map(item => (
<Col className="card-info-container" key={item.name}>
<Row className="card-icon-container">
<div className="card-icon-group">
<img src={item.image[0]} className={item.image[2]} loading="lazy"></img>
<p className="os-text-header">{item.image[1]}</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
<div className="card-icon-group">
<img src={item.image_2[0]} className={item.image_2[2]} loading="lazy"></img>
<p className="os-text-header">{item.image_2[1]}</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
</Row>
<Row className="card-icon-container">
<div className="card-icon-group">
<img src={item.image_3[0]} className={item.image_3[2]} loading="lazy"></img>
<p className="os-text-header">{item.image_3[1]}</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
</Row>
</Col>
))
}
</div>
)
} if (Object.keys(data[indexData][0]).length === 3) {
return (
<div className="card-info-container">
{
data[indexData].map(item => (
<Col className="card-container-2" key={item.name}>
<div className="card-icon-group">
<img src={item.image[0]} className={item.image[2]} loading="lazy"></img>
<p className="os-text-header">{item.image[1]}</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
<div className="card-icon-group">
<img src={item.image_2[0]} className={item.image_2[2]} loading="lazy"></img>
<p className="os-text-header">{item.image_2[1]}</p>
{/* <p className="os-text-description">Product 2 description. This is the product description.</p> */}
</div>
</Col>
))
}
</div>
)
} else {
return;
}
});
Data for Child Component
import pre_game_odds from "../../../assets/images/our_solutions/pre_game_odds.png";
import pick_em from "../../../assets/images/our_solutions/pick_em_style_games.png";
import white_label from "../../../assets/images/our_solutions/white_label_solution.png";
import micro_market from "../../../assets/images/our_solutions/in_game_micromarkets.png";
import commentator_dashboard from "../../../assets/images/our_solutions/commentator_dashboards.png";
import pregame from "../../../assets/images/our_solutions/pre_game_and_in_game_predictor_games.png";
import predictor_questions from "../../../assets/images/our_solutions/pre_game_and_in_game_predictor_questions.png";
import embeddable_widgets from "../../../assets/images/our_solutions/embeddable_widgets.png";
import pregame_playerprops from "../../../assets/images/our_solutions/pre_game_player_props.png";
import ingame_playerprops from "../../../assets/images/our_solutions/in_game_player_props.png";
import raw_data from "../../../assets/images/our_solutions/raw_data_for_daily_fantasy_sports.png";
export default [
[
{
name: "Bookmaker",
image: pre_game_odds,
image_2: pick_em,
image_3: micro_market,
image_4: white_label
}
],
[
{
name: "Tournament Organizer",
image: [commentator_dashboard, "Commentator dashboards", "commentator_dashboard"],
image_2: [white_label, "White label solution", "white_label"],
image_3: [pregame, "Pre-game and in-game predictor games", "pregame"]
}
],
[
{
name: "Media Fan Engagement",
image: [predictor_questions, "Pre-game and in-game predictor questions", "predictor_questions"],
image_2: [embeddable_widgets, "Embeddable widgets", "embeddable_widgets"]
}
],
[
{
name: "Daily Fantasy Sports",
image: [pregame_playerprops, "Pre-game player props", "pregame_playerprops"],
image_2: [ingame_playerprops, "In game player props", "ingame_playerprops"],
image_3: [raw_data, "Raw data for daily fantasy sports", "raw_data"]
}
]
];
I have my data stored on the Parent react component, and is passed into the props for the Child component, should I have the data in the child component instead? Also, based on what's rendered, the button style will change along with the position of the data displayed. How would I fix the initial delay rendering of the data displayed? I've also heard it's possibly due to the event listener not being destroyed after clicking.

How to add different text after the map function has rendered 3 times?

I want to add some text after the cards have rendered three times. these cards take value from a local json file using split and map. i also want to change the text every three times the component has rendered.
import React from 'react';
import data from '../data.json';
import { Card,Button } from 'react-bootstrap';
function Med() {
return (
<div>
{data.slice(0,6).map((item)=>{
return (
<div>
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{item.Name}</Card.Title>
<Card.Text>
This is the explaination of product card.
</Card.Text>
<Button variant="primary">Add to cart</Button>
</Card.Body>
</Card>
</div>
)
})}
</div>
)
}
export default Med;
This is my current output. but I want it to display some text after chris's card.

{data.slice(0,6).map((item,index)=>{//use the index to conditionally render })}
Edit #1 -
So, after reading your comment maybe this code will give you an idea
{data.slice(0, 6).map((item, index) => {
return (
<div>
{index < 3 ? <h1>First three</h1> : <h1>From Fourth</h1>
</div>
);
})}

Could not reduce the size of the Image div - React Js , Tailwind

I am trying to Make a clone of the Book My show Application. I'm building the Cast and crew slider. I tried reducing the size of the image but the spacing between the image does not seem to reduce.
This is my js file containing the src, settings for the slider:
import React from "react";
import Slider from "react-slick";
import CastPoster from "../MovieCast/movieCast.component";
const Cast = (props) => {
const settings = {
infinite: true,
autoplay: false,
speed: 1500,
slidesToShow: 4,
slidesToScroll: 2,
InitialSlide: 0,
}
const CastImages = [
{
src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/simu-liu-2006167-13-05-2021-04-13-21.jpg",
name:"Simu Liu",
role:"as Shang-Chi"
},
{
src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/awkwafina-1093500-20-06-2018-12-05-44.jpg",
name:"Awkwafina",
role:"as Katy"
},
{
src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/tony-leung-iein105711-02-04-2018-13-07-58.jpg",
name:"Tony Leung Chiu-wai",
role:"as Wenwu / The Mandarin"
},
{
src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/michelle-yeoh-1473-24-03-2017-17-32-23.jpg",
name:"Michelle Yeoh",
role:"as Jiang Nan"
}
];
return (
<>
<div className="">
<Slider {...settings}>
{
CastImages.map((data) => (
<CastPoster {...data} />
))
}
</Slider>
</div>
</>
)
};
export default Cast;
This is the js file containing the rendering of the slider:
import React from "react";
const CastPoster = (props) => {
return (
<>
<div className="">
<img className="rounded-full w-32 h-32 " src={props.src} atl={props.name} />
<div>
<h3> {props.name} </h3>
<p> {props.role} </p>
</div>
</div>
</>
);
};
export default CastPoster;
And I have added it as a component in a page:
import React from "react";
import Cast from "../components/Cast/Cast.component";
import MovieHero from "../components/MovieHero/MovieHero.component";
import offerIcon from "./offericon.png";
const MoviePage = () => {
return (
<>
<MovieHero />
<div className="my-12 container px-4 lg:w-3/4 lg:ml-20">
<div className="flex flex-col items-start gap-3">
<h2 className="text-gray-800 font-bold text-2xl"> About the movie </h2>
<p> Shang-Chi and The Legend of The Ten Rings features Simu Liu as Shang-Chi, who must confront the past he thought he left behind when he is drawn into the web of the mysterious Ten Rings organization. The film is directed by Destin Daniel Cretton and produced by Kevin Feige and Jonathan Schwartz.</p>
</div>
<div className="my-8">
<hr />
</div>
<div>
<h1 className="text-gray-800 font-bold text-2xl pb-4"> Applicable Offers </h1>
<div className="flex items-start gap-2 bg-yellow-100 border-yellow-400 border-2 border-dashed rounded-md p-3 w-96">
<img className="h-6" src={offerIcon}/>
<div className="flex flex-col items-start">
<h3 className="relative -top-1 text-gray-900 text-md font-semibold"> Filmy Pass </h3>
<p className="text-gray-600 -top-1 text-sm"> Get Rs.75* off on 3 movies you buy/rent on Stream. Buy Filmy Pass #Rs.99 </p>
</div>
</div>
</div>
<div className="my-8">
<hr />
</div>
<div>
<h3> Cast </h3>
<div>
<Cast />
</div>
</div>
</div>
</>
)
};
export default MoviePage;
The result:
This is the result of the code
I want to reduce the spacing between the images. Thank you.

The space between your images is determined by the amount of slides you want to show and the width of the slider div. To decrease the space between the images reduce the width of the slider or show more images.
Your Cast component could look like this
<div className="w-full">
<Slider {...settings} className="w-1/2">
{
CastImages.map((data) => (
<CastPoster {...data} />
))
}
</Slider>
</div>

How to rerender the parent component by using the button in child component using react hooks

Parent Component Assessment.js
import Header from './Header'
import { Button, Dialog } from '#material-ui/core';
import Dialog1 from './Dialog1'
import {Modal, Button as ButtonBootstrap} from 'react-bootstrap';
const Assessment = () => {
const [show1, setShow1] = useState(false);
const handleClose1 = () => setShow1(false);
const handleShow1 = () => setShow1(true);
return (
<div>
<Dialog1 show1={show1} handleClose1={handleClose1} setShow1={setShow1}/>
<Header/>
<div className="d-flex flex-row">
<div className="d-flex flex-column align-items-start m-3 mx-5">
<div className='m-2 mx-5 visible' style={{borderRadius: "15px", padding: "10px",
paddingRight:"25px", backgroundColor:"#00CCFF"}}>
<h5 className='font-weight-bold'>Are you having any of these following:-</h5>
<div className='d-flex flex-row'>
<ul>
<li>Extremely difficult to breath</li>
<li>Severe Chest pain.</li>
<li>Having a tough time awakening</li>
<li>Losing consciousness</li>
</ul>
<Button onClick={handleShow1}
className="mx-5 my-4 align-content-around"
variant="contained"
style={{maxWidth: "30px", maxHeight: "30px"}}>
Yes
</Button>
</div>
</div>
</div>
</div>
</div>
)
}
export default Assessment
Child Component Dialog1.js
import React from 'react'
import {Modal, Button as ButtonBootstrap} from 'react-bootstrap';
import Stage1 from '../images/nurse level 0.png';
import Assessment from './Assessment';
const Dialog1 = ({show1, handleClose1, reload}) => {
function rerender() {
reload();
}
return (
<div>
<Modal show={show1} onHide={handleClose1}>
<Modal.Header closeButton>
<span className=" d-flex justify-content-center" style={{marginLeft: "150px"}}>
<img src={Stage1} class=" img-fluid d-block rounded " alt="nurse_image_1" style={{height: "165px"}}/>
</span>
</Modal.Header>
<Modal.Body className="conatainer-fluid m-auto">
<h4 className="font-weight-bold mx-3">
These symptoms are the sign of coronavirus.
Please call 9-1-1 or call the Emergency
Department for help!
</h4>
</Modal.Body>
<Modal.Footer className="d-flex justify-content-center mx-auto">
<ButtonBootstrap onClick={} variant="primary" size="lg" active> //want to rerender the parent component
Retake Self-Assessment
</ButtonBootstrap>
</Modal.Footer>
</Modal>
</div>
)
}
export default Dialog1
I have tried forceupdate() method but it didn't worked if someone can tell me better idea for this.
also i think history.goback will not be appropriate for this. I have tried to pass the method inside parent component to get called when the button inside child component is clicked.

How to make images fit the page in React/Bootstrap?

I am using a function that maps every item in the props array to creating an image tag. I am trying to make every 3 images have a row div around them using bootstrap so they will fit the page correctly, but I cannot figure out how to do it. Any help would be appreciated. Here is the code:
import React, { Component } from 'react';
import "./Skills.css";
export default class Skills extends Component {
static defaultProps = {
images: [
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
"https://p7.hiclipart.com/preview/306/37/167/node-js-javascript-web-application-express-js-computer-software-others.jpg",
"https://bs-uploads.toptal.io/blackfish-uploads/skill_page/content/logo_file/logo/5982/express_js-161052138fa79136c0474521906b55e2.png",
"https://webassets.mongodb.com/_com_assets/cms/mongodb_logo1-76twgcu2dm.png",
"https://www.pngfind.com/pngs/m/430-4309307_react-js-transparent-logo-hd-png-download.png",
"https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/012015/bootstrap.png?itok=GTbtFeUj",
"https://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png"
]
}
photo() {
return (
<div >
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
);
}
render() {
return (
<div id="skills-background" className="mt-5">
<div id="skills-heading" className="text-center">Skills I've Learned:</div>
<div className="container">
<div className="row">
{this.photo()}
</div>
</div>
</div>
)
}
}
CodeSandbox

I think, I found the issue,
<div> <-----This div is the issue
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
You have wrapped your col-md-4 with a div, and div has display: block style, so you are getting every image on separate row. Simply replace div with Fragments,
<> <-----Make it Fragment
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</>