Is it possible to add ref on foreach variable in case of an array? [duplicate]

Question

I am using react with typescript and would like to iterator an element and add a unique ref to each element to check if the checkbox element is selected or not.

  private product1Ref: HTMLInputElement;
  private product2Ref: HTMLInputElement;
  private product3Ref: HTMLInputElement;
  private product4Ref: HTMLInputElement;

const listItem: JSX.Element[] = [];
 this.props.products.forEach((ele) => {
  if(ele.isAvailable) {
        listItem.push(
            <li>
                <label>
                    <input
                        type="checkbox"
                        id={ele.name}
                        ref={(input) => ?????? = input}
                    />
                        {ele.name}
                    </label>
            </li>
        );
    }
});

Now is it possbile to add ref to the above elements? if so how can we do it ? If not what is the another way to check if the checkbox element is selected or not?

T.J. Crowder · Accepted Answer · 2019-12-10 19:18:01Z

0

I'd extract the part that needs a ref into a component:

function Checkbox({id, label}) {
    const [checked, setChecked] = useState(false);
    const onChange = useCallback(e => {
        setChecked(e.target.checked);
    }, []);
    return (
        <label>
            <input
                type="checkbox"
                id={id}
                checked={checked}
                onChange={onChange}
            />
            {label}
        </label>
    );
}

then use that component:

const listItem: JSX.Element[] = [];
this.props.products.forEach((ele) => {
    if(ele.isAvailable) {
        listItem.push(
            <li>
                <Checkbox id={ele.name} label={ele.name} />
            </li>
        );
    }
});

answered Dec 10, 2019 at 19:18

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to add ref on foreach variable in case of an array? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related