How do I get api object properties in react

user_9561267 0
Viewed 39

I'd like to know how to get the object properties from a json. I got this fake API:

{
    "Arreglo":[
        { "label": "Choose Wisely", "value": "Choose Wisely"},
        { "label": "Primer opción", "value": "1", "testvariable": [] },
        { "label": "Segunda opción"," value": "2" },
        { "label": "Tercer opción", "value": "3" }
    ]
}

This is my App.js :

import SelectComponent from './Components/SelectComponent';
import {Arreglo} from './FakeApis/SelectOptions';

function App() {
  return (
    <div className="App">
      <SelectComponent items1 = {Arreglo}/>
    </div>
  );
}

And this is my form and how I set the state:

export default function SelectComponent(items1) {
    console.log(items1.items1);
    const[testVar, testFunction] = useState(false);
    const [items] = React.useState(items1.items1);
<form>
    <select onChange = {handleChange}>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
          label={item.label}
        >
          {item.label}
        </option>
      ))}
    </select>
  </form>

In this function I'd like to know how to get the "testvariable"

const handleChange = event => {

    console.log("The variable --->");
};

Hope I explained myself good. regards!

react-hooks reactjs json javascript
3 Answers

Since your data doesn't have any unique identifying id, you can use the index of each item in the array as a reference point that you can use in your change handler.

To do this, first read your data into some piece of state. While your data is static now, this is good practice for when you start speaking to an actual API to fetch data.

Once you have that data available within your component (you can abstract this back into a separate Select Component, I just did it one file for ease of understanding), you can access the selected option by using the selectedIndex property of the event within the change event handler.

import {Arreglo} from './FakeApis/SelectOptions';
export default function App() {

  // Read the data into state
  const [data] = React.useState(Arreglo);

  const handleChange = e => {
    // The index of the selected option
    const { selectedIndex } = e.currentTarget;

    // Grab the element at that index
    const selectedOption = data[selectedIndex];

    // You can now access any property on that element, like testVariable
    console.log(selectedOption.testvariable);
  };
  return (
    <div className="App">
      <select onChange={handleChange}>
        {data.map(item => (
          <option key={item.value} value={item.value} label={item.label}>
            {item.label}
          </option>
        ))}
      </select>
    </div>
  );
}
user_137571080

To access the testVar your handleChange function must be inside the SelectComponent function just like the testVar:

export default function SelectComponent(items1) {
    const[testVar, testFunction] = useState(false);
    const [items] = React.useState(items1.items1);

    const handleChange = event => {
         // testVar can be called here
    }

<form>
    <select onChange = {handleChange}>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
          label={item.label}
        >
          {item.label}
        </option>
      ))}
    </select>
  </form>
user_129896850

Something that you could do in order to solve your issue and have access to your data is to replace your select tag by the following:

<select onChange = {(event) => handleChange(event, items)}>
  {items.map(item => (
    <option
      key={item.value}
      value={item.value}
      label={item.label}
    >
      {item.label}
    </option>
  ))}
</select>

And let your handleChange function accept another parameter:

const handleChange = (event, items) => {
// items is now available in this block and you can get testvariable here.
console.log(`The variable ${items}`);

};

user_113485790
Related