#onClick not responding

27 messages · Page 1 of 1 (latest)

rough zodiac
#

Something with the onCLick or typescript not workign with this code: i tried to add data tag didnt help

import { styled } from "solid-styled-components";

type AccordionStyle = 'primary';

interface AccordionProps {
  style?: AccordionStyle;
  data: any;
}

const primary = styled("div")`
  display: flex;
  flex-direction: column;
  background: black;
  color: white;

  & > div > :first-child {
    display: flex;
    flex-direction: column;
    padding: 1rem;

    &:hover {
      background: #222222;
    }
  }
`;

const AccordionStyles = {
  primary,
};

function AccordionBuild(props: AccordionProps) {
  const [isVisible, setIsVisible] = createSignal(0);

  const handleClick: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> = (event) => {
    const target = event.currentTarget as HTMLDivElement;
    const index = parseInt(target.dataset.index ?? "", 10);
    if (!isNaN(index)) {
      const newIndex =  index;
      setIsVisible(newIndex);
    }
  };

  const build = props.data.map((item: any) => {
    const isExpandedIndex = item.id === isVisible();

    const icon = <span>{isExpandedIndex ? "X" : "Y"}</span>;

    return (
      <div onClick={handleClick} data-index={item.id}>
        <div>
          {item.label} {icon}
        </div>
        {isExpandedIndex && <div>{item.content}</div>}
      </div>
    );
  });

  const AccordionComponent = props.style ? AccordionStyles[props.style] : AccordionStyles.primary;

  return (
    <AccordionComponent>
      {build}
    </AccordionComponent>
  );
}

export function AccordionDroid() {
  const accordionData = [
    { id: 1, label: 'Radha', content: 'Love for Krishna' },
    { id: 2, label: 'Krishna', content: 'Love for Radha' },
    { id: 3, label: 'souls', content: 'Happy' }
  ];

  return <AccordionBuild data={accordionData} />;
}
proud fossil
#

for reading the signal requires to call the function, the following line should be
const isExpandedIndex = index === expandedIndex();

#

Requires calling the function because thats the way it keeps track where the signal is used

rough zodiac
#

sorry that was me trying things. still get :

Type 'void' is not assignable to type 'EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined'.ts(2322)
jsx.d.ts(222, 5): The expected type comes from property 'onClick' which is declared here on type 'HTMLAttributes<HTMLDivElement>'
(property) JSX.CustomEventHandlersCamelCase<HTMLDivElement>.onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined

on the onClick

#

updated the code

#

tried to go by event instead but still not working

neat parcel
#

change handleClick(item.id) to handleClick

proud fossil
#

for posting multiline code you wrap in three `
like

const = something
image.png
rough zodiac
#

still doesnt open

neat parcel
#

and change the type for handleClick to JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> and you can remove the :Event part inside the parens

#

well, if you add a console log inside the handleClick function does it work?

#

Could be an issue somewhere else

rough zodiac
#

updated code, have gone around in circles on this one for hours. is map supported in solid?

proud fossil
#

yes, can you post the code properly formated, hard to read, copy and paste

rough zodiac
#

console log returns number when clicked, index and newIndex are changing.

#

signal is not getting updated from click event

neat parcel
#

The signal isn't updated or the ui isn't updated?

rough zodiac
#

the signal is not getting the updated id on click

#

if i give the signal a default value of 1 then the accordion tab 1 opens.

neat parcel
#

try making isExpandedIndex a function

rough zodiac
# 
import { styled } from "solid-styled-components";

type AccordionStyle = 'primary';

interface AccordionProps {
  style?: AccordionStyle;
  data: any;
}

const primary = styled("div")`
  display: flex;
  flex-direction: column;
  background: black;
  color: white;

  & > div > :first-child {
    display: flex;
    flex-direction: column;
    padding: 1rem;

    &:hover {
      background: #222222;
    }
  }
`;

const AccordionStyles = {
  primary,
};

function AccordionBuild(props: AccordionProps) {
  const [isVisible, setIsVisible] = createSignal(0);
  console.log(isVisible());

    const handleClick = (id:any) => {
        const newIndex = id;
      setIsVisible(newIndex);
  };

  const build = props.data.map((item: any) => {
    const isExpandedIndex = () => {
         item.id === isVisible();
    };

    const icon = <span>{{isExpandedIndex} ? "X" : "Y"}</span>;

    return (
      <div onClick={handleClick} data-index={item.id}>
        <div>
          {item.label} {icon}
        </div>
        {{isExpandedIndex} && <div>{item.content}</div>}
      </div>
    );
  });

  const AccordionComponent = props.style ? AccordionStyles[props.style] : AccordionStyles.primary;

  return (
    <AccordionComponent>
      {build}
    </AccordionComponent>
  );
}

export function AccordionDroid() {
  const accordionData = [
    { id: 1, label: 'Radha', content: 'Love for Krishna' },
    { id: 2, label: 'Krishna', content: 'Love for Radha' },
    { id: 3, label: 'souls', content: 'We are their babies' }
  ];

  return <AccordionBuild data={accordionData} />;
}
#

now all the divs are showing. no control. and signal has not update onclick

neat parcel
#

everywhere you use isExpandedIndex you need to call it since it's a function.

rough zodiac
neat parcel
rough zodiac
#

ok then "return" the statement. So in solid its best to do create it as a function? rather then a const? (coming from react background). Thank you so much tried for 4 hours 😦 massive help.

neat parcel
#

In solid, only functions, JSX, and some other scopes can be reactive to changes to signals. If it's just a variable, it will not change when the signals does.