Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I create control that depends on another control?

I’m using Leva js to create a simple panel that includes a button that creates an array of random numbers. The length of that array should depends on the property datasetLength of Leva panel but it seems not to work because of:

Uncaught ReferenceError: Cannot access ‘levaConfig’ before initialization

Here my code:

import { useState } from "react";
import { useControls, button } from "leva";

function App() {
  const [dataset, setDataset] = useState<Datum[]>(computeRandomDataset);

  const levaConfig = useControls({
    "update dataset": button(() => setDataset(computeRandomDataset)),
    datasetLength: {
      value: 300,
      min: 0,
      max: 500,
      step: 1,
    },
  });

  function computeRandomDataset() {
    const datasetLength = levaConfig.datasetLength; // <-- ERROR
    return createDataset(datasetLength);
  }

  return <h1>Vite + React</h1>;
}

export default App;

function createDataset(datasetLength: number) {
  const dataset = [];
  for (let i = 0; i < datasetLength; i++) {
    dataset.push(Math.random());
  }
  return dataset;
}

The result should be this:
enter image description here

Tags:

2

Answers


  1. 0

    I think you are trying to access levaConfig.datasetLength before it has been initialized. The levaConfig object is being created asynchronously, and trying to use its properties directly during the initialization of your component can lead to reference errors.

    To solve this problem, you can use the useEffect hook to update the dataset when the datasetLength property changes. You can do it like this:

    import { useState, useEffect } from "react";
import { useControls, button } from "leva";

function App() {
  const [dataset, setDataset] = useState<Datum[]>(computeRandomDataset);

  const levaConfig = useControls({
    "update dataset": button(() => setDataset(computeRandomDataset)),
    datasetLength: {
      value: 300,
      min: 0,
      max: 500,
      step: 1,
      onChange: (value) => setDatasetLength(value),
    },
  });

  useEffect(() => {
    setDataset(computeRandomDataset(levaConfig.datasetLength));
  }, [levaConfig.datasetLength]);

  function computeRandomDataset(length: number) {
    return createDataset(length);
  }

  return <h1>Vite + React</h1>;
}

export default App;

function createDataset(datasetLength: number) {
  const dataset = [];
  for (let i = 0; i < datasetLength; i++) {
    dataset.push(Math.random());
  }
  return dataset;
}

    This should resolve the reference error you were encountering.

    Login or Signup to reply.
  2. 0

    You should try initialising the levaConfig const before your useState statement. Because your useState prop is trying to access the levaConfig.

    import { useState } from "react";
import { useControls, button } from "leva";

function App() {
  const levaConfig = useControls({
    "update dataset": button(() => setDataset(computeRandomDataset)),
    datasetLength: {
      value: 300,
      min: 0,
      max: 500,
      step: 1,
    },
  });

  const [dataset, setDataset] = useState<Datum[]>(computeRandomDataset);

  function computeRandomDataset() {
    const datasetLength = levaConfig.datasetLength; // <-- ERROR
    return createDataset(datasetLength);
  }

  return <h1>Vite + React</h1>;
}

export default App;

function createDataset(datasetLength: number) {
  const dataset = [];
  for (let i = 0; i < datasetLength; i++) {
    dataset.push(Math.random());
  }
  return dataset;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search