Breaking News: Grepper is joining You.com. Read the official announcement!

Allow only one selection at a time ; import React from "react";import downIcon from "../../images/chevron-down.svg";import { useState } from "react";const Details = ({ detailTitle, detailList,handleSelect }) => { const [detailsShown, setDetailsShown] = u

Ayomikun faluyi answered on June 16, 2023 Popularity 1/10 Helpfulness 1/10

answer Allow only one selection at a time ; import React from "react";import downIcon from "../../images/chevron-down.svg";import { useState } from "react";const Details = ({ detailTitle, detailList,handleSelect }) => { const [detailsShown, setDetailsShown] = u

Allow only one selection at a time ; import React from "react";import downIcon from "../../images/chevron-down.svg";import { useState } from "react";const Details = ({ detailTitle, detailList,handleSelect }) => { const [detailsShown, setDetailsShown] = u

Comment

import React, { useState } from "react";
import downIcon from "../../images/chevron-down.svg";

const Details = ({ detailTitle, detailList, handleSelect }) => {
  const [selectedItem, setSelectedItem] = useState(null);
  const [detailsShown, setDetailsShown] = useState(false);

  const handleItemClick = (item) => {
    setSelectedItem(item);
    handleSelect && handleSelect(item);
  };

  return (
    <div className="details">
      <p
        onClick={() => setDetailsShown(!detailsShown)}
        className="f-jc-sb"
      >
        <span>{detailTitle}</span>
        <img
          style={{ transform: detailsShown ? "rotate(180deg)" : "none" }}
          src={downIcon}
          alt="Down Arrow"
        />
      </p>

      {detailsShown && (
        <div className="detail-sub-list">
          {detailList.map((item, index) => {
            return (
              <div key={index} className="list f-jc-sb">
                <label>
                  <input
                    type="radio"
                    name="detailSelection"
                    checked={selectedItem === item}
                    onChange={() => handleItemClick(item)}
                  />
                  <p>{item}</p>
                </label>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default Details;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: import javascript selection time use-state

Link to this answer
Share Copy Link

Contributed on Jun 16 2023

Ayomikun faluyi

0 Answers Avg Quality 2/10

Allow only one selection at a time ; import React from "react";import downIcon from "../../images/chevron-down.svg";import { useState } from "react";const Details = ({ detailTitle, detailList,handleSelect }) => { const [detailsShown, setDetailsShown] = u

Contents

More Related Answers

Allow only one selection at a time ; import React from "react";import downIcon from "../../images/chevron-down.svg";import { useState } from "react";const Details = ({ detailTitle, detailList,handleSelect }) => { const [detailsShown, setDetailsShown] = u

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.