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

"Chakde Frontend Interview" series will contain frontend interviews for all rounds - #Javascript, #React, Machine Coding, #LLD , System Design, etc.
Trust me, this series will be one of the best resources on the internet to prepare for #frontendwebdevelopment #interviews ✅
Also, I would like to thank you all for the support you have given to this series throughout. Keep pouring your love and support to this series and I'll keep bringing in the quality content for you.
please share this series with your friend and on Linkedin as well to keep me motivated .
Connect to learn & grow together in our career❤️:
✅ Linkedin: / engineerchirag
✅ Twitter: / engineerchirag
✅ Instagram: / engineerchirag
Music track: Wanderer by walen
Source: freetouse.com/...
No Copyright Background Music
#interview #react #javascript #chakdeinterviews #frontenddevelopment #mockinterview

[@kamalsinghkhanna8143]

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

[@engineerchirag]

🙏

[@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.

[@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.

[@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 🙏

[@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;

[@soumyasharma8321]

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.

[@AtulKumar-gt7uq]

Most awaited 🤟

[@engineerchirag]

❤️❤️

[@AbhishekTiwari-xt1kt]

Patience was tested

[@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.

[@imtiazmehmood3006]

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

[@mkunboxing]

awesome thanks sir

[@engineerchirag]

❤️

[@anudeep9683]

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

[@AquibSayyed-wv2mj]

which editor are you using?

[@ShubhamKumar-ex3nk]

Please give link for problem statements 🙏🙏🙏

[@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

[@abhirajthakur1398]

Rejected

[@CodeNinja18]

Please explain the solution if interviewee unable to answer

[@sutharjay1]

It's simple to understand

[@engineerchirag]

Noted!

[@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