Hi, I have this component and I would like to not have a div wrapping the children to avoid display conflicts but I don't find any way to add a className to it event by cloningimport React, {useEffect, useState} from 'react'; type Props = { delay: number; children: React.ReactNode; } const ProgressiveDisplay = ({ delay, children }: Props) => { const [state, setState] = useState (0); const [elements, setElements] = useState ([]); useEffect(() => { setElements(React.Children.toArray(children)); }, [children]); useEffect(() => { const interval = setInterval(() => { setState((prevIndex) => prevIndex + 1); }, delay); return () => clearInterval(interval); }, [delay]); return ( <> {elements.map((child, index) => { if (React.isValidElement(child)) { return {child} ; } return child; })} ); } export default ProgressiveDisplay;

Next.js add tailwind className to cloned child without wrapping it

Unanswered

Chinese Alligator posted this in #help-forum

Chinese AlligatorOP

2024-01-04T19:39:12.000Z

Hi, I have this component and I would like to not have a div wrapping the children to avoid display conflicts but I don't find any way to add a className to it event by cloning

import React, {useEffect, useState} from 'react';

type Props = {
    delay: number;
    children: React.ReactNode;
}

const ProgressiveDisplay = ({ delay, children }: Props) => {
    const [state, setState] = useState<number>(0);
    const [elements, setElements] = useState<React.ReactNode[]>([]);

    useEffect(() => {
        setElements(React.Children.toArray(children));
    }, [children]);

    useEffect(() => {
        const interval = setInterval(() => {
            setState((prevIndex) => prevIndex + 1);
        }, delay);

        return () => clearInterval(interval);
    }, [delay]);

    return (
        <>
            {elements.map((child, index) => {
                if (React.isValidElement(child)) {
                    return <div key={index} className={`${index <= state ? 'opacity-100' : 'opacity-0'} duration-500`}>{child}</div>;
                }
                return child;
            })}
        </>
    );
}

export default ProgressiveDisplay;

16 Replies

Chinese AlligatorOP

2024-01-06T13:46:28.000Z

Nobody ???

Northern Wheatear

2024-01-06T16:02:36.000Z

I didn't understand your question to be honest. Do you want to pass your className to child?

@Northern Wheatear I didn't understand your question to be honest. Do you want to pass your className to child?

Chinese AlligatorOP

2024-01-07T17:00:54.000Z

I want to pass 'opacity-100' : 'opacity-0' to child

@Chinese Alligator I want to pass 'opacity-100' : 'opacity-0' to child

Anay-208

2024-01-07T19:30:15.000Z

You seem to have already done that

@Anay-208 You seem to have already done that

Chinese AlligatorOP

2024-01-07T19:32:33.000Z

I don't want to use <div> but #Unknown Channel{child}</>

nothing should wrap child

Anay-208

2024-01-07T19:33:18.000Z

thats not possible. to add a className, div elements needs to be there

Northern Wheatear

2024-01-08T17:21:35.000Z

If your child element can accept className then its possible

Something like this

return (
        <>
            {elements.map((Child, index) => {
                if (React.isValidElement(Child)) {
                    return <Child key={index} className={`${index <= state ? 'opacity-100' : 'opacity-0'} duration-500`} />;
                }
                return Child;
            })}
        </>
    );

Note that Child starts with capital letter C

I think this should be possible

Chinese AlligatorOP

2024-01-08T21:15:38.000Z

@Anay-208 thats not possible. to add a className, div elements needs to be there

Chinese AlligatorOP

2024-01-08T21:16:30.000Z

Can't use div it destroys the layout

@Chinese Alligator Hi, I have this component and I would like to not have a div wrapping the children to avoid display conflicts but I don't find any way to add a className to it event by cloning ts import React, {useEffect, useState} from 'react'; type Props = { delay: number; children: React.ReactNode; } const ProgressiveDisplay = ({ delay, children }: Props) => { const [state, setState] = useState<number>(0); const [elements, setElements] = useState<React.ReactNode[]>([]); useEffect(() => { setElements(React.Children.toArray(children)); }, [children]); useEffect(() => { const interval = setInterval(() => { setState((prevIndex) => prevIndex + 1); }, delay); return () => clearInterval(interval); }, [delay]); return ( <> {elements.map((child, index) => { if (React.isValidElement(child)) { return <div key={index} className={`${index <= state ? 'opacity-100' : 'opacity-0'} duration-500`}>{child}</div>; } return child; })} </> ); } export default ProgressiveDisplay;

Varied Thrush

2024-01-08T22:43:47.000Z

you cant give attributes to the empty element but you could do following:

    <>
      {elements.map((child, index) => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child as ReactElement, {
            key: index,
            className: `${child.props.className || ''} ${index <= state ? 'opacity-100' : 'opacity-0'} duration-500`.trim(),
          });
        }
        return child;
      })}
    </>

@Varied Thrush you cant give attributes to the empty element but you could do following: tsx <> {elements.map((child, index) => { if (React.isValidElement(child)) { return React.cloneElement(child as ReactElement, { key: index, className: `${child.props.className || ''} ${index <= state ? 'opacity-100' : 'opacity-0'} duration-500`.trim(), }); } return child; })} </>

Chinese AlligatorOP

2024-01-09T19:29:36.000Z

Opacity is not applied to cloned element

@Chinese Alligator Opacity is not applied to cloned element

Varied Thrush

2024-01-09T19:54:21.000Z

pass the div than and give it classname of parent element if dont want to mess the ui