ayoub_owl Comments - Answer Overflow

ayoub_owl

•Created by celtic426 on 5/22/2024 in #questions

Can you store refs in an object in React?

I think what you can do is this

  const refs = useRef({
    contextChildrenActive: null,
    primaryNavBar: null,
    ...
  });

  return (
    <div className="App">
      <div ref={(ref) => (ref.current.contextChildrenActive = ref)} type="text" />
      <div ref={(ref) => (ref.current.primaryNavBar = ref)} type="text" />
    </div>
  );

  const refs = useRef({
    contextChildrenActive: null,
    primaryNavBar: null,
    ...
  });

  return (
    <div className="App">
      <div ref={(ref) => (ref.current.contextChildrenActive = ref)} type="text" />
      <div ref={(ref) => (ref.current.primaryNavBar = ref)} type="text" />
    </div>
  );

you could even use an array

3 replies

TTCTheo's Typesafe Cult

•Created by ayoub_owl on 1/11/2023 in #questions

react table v7 with typescript

Solved

function EditableCell<T extends object>({
  value: initialValue,
  row: { index },
  column: { id },
  updateData,
}: CellProps<T, any>) {
  const [value, setValue] = React.useState(initialValue);

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  // We'll only update the external data when the input is blurred
  const onBlur = () => {
    updateData(index, id, value);
  };

  // If the initialValue is changed external, sync it up with our state
  React.useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  return (
    <input
      value={value}
      onChange={(event) => onChange(event)}
      onBlur={onBlur}
    />
  );
}

function EditableCell<T extends object>({
  value: initialValue,
  row: { index },
  column: { id },
  updateData,
}: CellProps<T, any>) {
  const [value, setValue] = React.useState(initialValue);

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  // We'll only update the external data when the input is blurred
  const onBlur = () => {
    updateData(index, id, value);
  };

  // If the initialValue is changed external, sync it up with our state
  React.useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  return (
    <input
      value={value}
      onChange={(event) => onChange(event)}
      onBlur={onBlur}
    />
  );
}