state as an argument to access an object?

Issue

(i'm new to react btw) So i'm trying to make a code that:

1. Reads the value of two select boxes and an input
2. Uses the value of the selects to read a Javascript object
3. Multiplies the value of the input by the value from the object.

This is what I've got to so far:

const valores = {
  longitud: {
    metros: {
      val: 1,
    },
    centímetros: {
      val: 0.01,
    },
  fuerza: {
    newtons: {
      val: 1,
    },
    dina: {
      val: 0.0000001,
    },
  }
}
const [tipo, setTipo] = useState("longitud")
  const [uIn, setUIn] = useState("metros")
  const [val, setVal] = useState(0)
  const unidades = {
    longitud: [
      "metros",
      "centímetros",
    ],
    fuerza: ["newtons", "dinas"],
  }
  return (
    <div>
      <select
        id="tipoMedida"
        value={tipo}
        onChange={e => setTipo(e.target.value)}
      >
        <option value="longitud">Longitud</option>
        <option value="fuerza">Fuerza</option>
        
      </select>

      <input type="number" id="valor" value={val}
        onChange={e => setVal(e.target.value)}/>

      <select id="unidadOrigen" value={uIn}
        onChange={e => setUIn(e.target.value)}>
        {unidades[tipo].map(u => {
          return <option value={u}>{u}</option>
        })}
      </select>

This part works fine. However, I'm not sure how to do the next one. I want to show a text that shows the result, for which i did this <div id="resultado">El resultado es {val*valores[tipo[uIn[val]]]}</div>but it shows nothing, and {val*valores[tipo[uIn.val]]} says uIn is undefined. Is something wrong with my code, and if not how could I achive that result?

Solution

The way you are accessing the objects is causing the issue.

The correct way would be to do

const result = val * valores[tipo][uIn].val;
console.log(result);

The final code would look like this.

Please note that I made some changes in the onChange handler for the first select as it was leading to a bug. The default of uIn needed to be changed when tipo was modified

import { useState } from "react";

export default function App() {
  const valores = {
    longitud: {
      metros: {
        val: 1
      },
      centímetros: {
        val: 0.01
      }
    },
    fuerza: {
      newtons: {
        val: 1
      },
      dinas: {
        val: 0.0000001
      }
    }
  };
  const [tipo, setTipo] = useState("longitud");
  const [uIn, setUIn] = useState("metros");
  const [val, setVal] = useState(0);
  const unidades = {
    longitud: ["metros", "centímetros"],
    fuerza: ["newtons", "dinas"]
  };

  const result = val * valores[tipo][uIn].val;

  return (
    <div>
      <select
        id="tipoMedida"
        value={tipo}
        onChange={(e) => {
          setTipo(e.target.value);
          setUIn(unidades[e.target.value][0]);
        }}
      >
        <option value="longitud">Longitud</option>
        <option value="fuerza">Fuerza</option>
      </select>

      <input
        type="number"
        id="valor"
        value={val}
        onChange={(e) => setVal(e.target.value)}
      />

      <select
        id="unidadOrigen"
        value={uIn}
        onChange={(e) => setUIn(e.target.value)}
      >
        {unidades[tipo].map((u) => {
          return (
            <option key={u} value={u}>
              {u}
            </option>
          );
        })}
      </select>

      <div id="resultado">El resultado es {result}</div>
    </div>
  );
}

Tip: Instead of hardcoding values in the unidades variable, you can use the javascript method Object.keys() to generate the options dynamically. That way, when new options are added, you don't need to make a lot of changes in a lot of places.

Answered By - Ashish Shevale