2.5 Years Experienced React JS Interview | Chakde Frontend Interview EP - 10

[@kamalsinghkhanna8143]

Chirag, I like the way you keep yourself calm during the interview.

[@engineerchirag]

🙏

[@godessGOAT]

fr

[@udaykulkarni5639]

I love how this guy is so patient.. i just couldnt take the way she was coding and testing stuff left and right.. i started skipping in first 10 mins itself. Kudos to you dude..

[@AbhishekTiwari-xt1kt]

Patience was tested

[@coderinprocess2678]

I am solving too along with the candidate. I am pausing the video as Chirag keeps on adding the functionality. Practicing thinking out loud while doing this

[@engineerchirag]

Awesome ❤️

[@dilshadazam880]

Your consistency is amazing. With you I have also been consistent. Thanks

[@engineerchirag]

Thank you 🙏

[@AbhishekTiwari-xt1kt]

In order to not toggle the accordion on clicking checkbox, you simply can stop the event propagation from the handle checkbox change function.

[@shubhanshusahuu]

Just use the index of that child accordian, which must be used inside a map function and just set the index inside the state whenever expand event happen, and use a prop "expanded" ={arr[state] === index? true : false} And use this expanded prop inside accordian to apply expanded class Thats it.

[@udaykulkarni5639]

This dude KNOWS how to interview 🙌🏼 i would love this dude to interview me.. wouldnt feel bad even if i get rejected.. good job man.

[@DebayanMukherjee-wo2ul]

Learn a lot through your videos.......as a fresher.......keep asking more interesting questions

[@engineerchirag]

Thank you 🙏

[@Prince-yz1tc]

My Solution, it is working but I'm not able to achieve the last functionality where we want to change the checkbox value but not expand the acoordian. I'm not able to debug the issue, why parent is logged in first? import React, { useState } from "react"; import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io"; const Data = [ { id: "1", title: "Accordion Item 1", description: "Content for accordion item 1", checked: false, expanded: false, }, { id: "2", title: "Accordion Item 2", description: "Content for accordion item 2", checked: false, expanded: true, }, { id: "3", title: "Accordion Item 3", description: "Content for accordion item 3", checked: true, expanded: false, }, { id: "4", title: "Accordion Item 4", description: "Content for accordion item 4", checked: false, expanded: false, }, { id: "5", title: "Accordion Item 5", description: "Content for accordion item 5", checked: false, expanded: false, }, ]; const AccordionComp = ({ title, description, id, setExpanded, checked, expanded, toggleCheck, }: { title: string; description: string; id: string; checked: boolean; expanded: boolean; setExpanded: (val: string) => void; toggleCheck: (id: string) => void; }) => { return ( { console.log("parent"); setExpanded(id); }} className="flex justify-between items-center space-x-2" > { e.stopPropagation(); console.log("child"); toggleCheck(id); }} type="checkbox" className="mr-2" name="Check" /> {title} {expanded ? ( ) : ( )} {expanded && } ); }; const Accordion = () => { const [items, setItems] = useState(Data); const isDisabled = !items.every((x) => x.checked); const handleToggleCheck = (id: string) => { setItems((prev) => prev.map((i) => i.id != id ? i : { ...i, checked: !i.checked, } ) ); }; const setExpanded = (id: string) => { setItems((prev) => prev.map((i) => i.id !== id ? { ...i, expanded: false } : { ...i, expanded: true } ) ); }; return ( {items.map((item) => ( ))} Submit ); }; const Description = ({ text }: { text: string }) => {text}; export default Accordion;

[@soumyaa1804]

I also faced the same issue. Adding e.stopPropagation() on onClick of the input tag worked for me. Like this e.stopPropagation()} onChange={() => { handleChange(data.id); }} />

[@yashsolanki069]

you need to stop propagating the event

[@Prince-yz1tc]

@@yashsolanki069 Could you explain why? If i stop it'll call both child and parent. At this time, I only wanna call child event handler not parent's.

[@sutharpavan1326]

Thank you sir for having this interview!! I would have used a state only for the current expanded item to store the expanded item's id and matching that id with the item's id in the iteration to show the expanded item's content. To prevent the expansion of the item/ accordian on click of the checkbox, we can use e.stopPropagation to prevent notify the parent about the event. Can you please tell in which companies these types of questions are asked? Thanks again.

[@AquibSayyed-wv2mj]

which editor are you using?

[@imtiazmehmood3006]

Disable Button : const isDisabled = React.useCallback( () => { state.every(val => val.checked) }, [state] )

[@mikelan9854]

we just need a value in isDisabled , shouldn't we use useMemo instead and return like return state.every(val=>val.checked) ?

[@anudeep9683]

Hey,I wanted to know if theres any platform where I can practice implementing such features.

[@ShubhamKumar-ex3nk]

Please give link for problem statements 🙏🙏🙏

[@mkunboxing]

awesome thanks sir

[@engineerchirag]

❤️

[@CodeNinja18]

Can we use useRef for that for changing expanding except itself and vice-versa? Any idea

[@harvey_04]

I'd suggest using a state to track the click and we track it with an id for each of them.

[@dhruvdalal878]

I want to be examined by you in any of like this mock interview...how can i reach out to you?

[@engineerchirag]

DM me on LinkedIn

[@CodeNinja18]

Please explain the solution if interviewee unable to answer

[@sutharjay1]

It's simple to understand

[@engineerchirag]

Noted!

[@abhirajthakur1398]

Rejected

[@coderevision3059]

She is writing code like a fresher 😂

[@anjalii1102]

Bro get a treatment. There's nothing funny over here

[@shubhamthaker9380]

i tried and got proper output Here is my simple code below import React, { useEffect, useState } from 'react' import { CiCircleChevDown } from "react-icons/ci"; function App() { const [expandedIndex, setExpandedIndex] = useState(null); const [allChecked, setAllChecked] = useState(false) const [questions, setQuestions] = useState([ { id: 1, question: "Why you need to proceed further", answer: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est autem tenetur voluptatum sequi provident sapiente temporibus officiis praesentium accusantium consequatur excepturi, quasi molestias similique? Provident possimus dolores cum asperiores! Perspiciatis?', checked: false }, { id: 2, question: "Terms and conditions are applied here", answer: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est autem tenetur voluptatum sequi provident sapiente temporibus officiis praesentium accusantium consequatur excepturi, quasi molestias similique? Provident possimus dolores cum asperiores! Perspiciatis?', checked: false }, { id: 3, question: "We need to practice more of JS and React JS", answer: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est autem tenetur voluptatum sequi provident sapiente temporibus officiis praesentium accusantium consequatur excepturi, quasi molestias similique? Provident possimus dolores cum asperiores! Perspiciatis?', checked: false } ]) const toggleHandler = (index) => { setExpandedIndex(expandedIndex === index ? null : index); console.log(expandedIndex); }; useEffect(() => { const areAllChecked = questions.every((question) => question.checked) setAllChecked(areAllChecked) }, [questions]) const handleCheckChange = (id) => { const updatedQuestions = questions.map((question) => question.id === id ? { ...question, checked: !question.checked } : question ); console.log(updatedQuestions); setQuestions(updatedQuestions); }; return ( { questions.map((question, index) => { return toggleHandler(index)} > handleCheckChange(question.id)} /> {question.question} {question.answer} })} {allChecked && submit} ) } export default App

[@shubhamthaker9380]

this is css body{ margin: 0; padding: 0; } .question-container { display: flex; gap:15px; /* justify-content: space-between; */ align-items: center; padding: 20px 10px; } .question-container icon{ display: flex; justify-content: flex-end; } .hidden{ display: none; } .show{ display: block; } .ans-box{ width:100%; background-color: gainsboro; padding: 10px 10px; color:black; overflow: hidden; border-radius: 5px; border: rebeccapurple solid; }

[@watchnow4211]

Rejected