Can't get other values to show using react

Question

I can't figure out how to get more values to show in my table using REACT. The only thing that I am able to show is the cost. I can't show Manufacturer and Item. So When I choose Iphone12 - Manufacturer will be "Apple" and Item will be "iPhone 12" & Galaxy S21 will be "Android" and "Galaxy 21",from the data structure in index. This is my Index.js :

import React from "react";
import ReactDOM from "react-dom";
import "./Home.css";
import "bootstrap/dist/css/bootstrap.min.css";
import MTWork from "./MTWork";
let inventory = [
  { id: 0, manufact: "None", item: "None", descr: "None", avail: 0, price: 0 },
  {
    id: 100,
    manufact: "Samsung",
    item: "Galaxy S22",
    descr: "The Lastest Phone",
    avail: 22,
    price: 1399.99,
  },
  {
    id: 101,
    manufact: "Samsung",
    item: "Galaxy S21",
    descr: "Recently refurbished like new",
    avail: 5,
    price: 699.99,
  },
  {
    id: 102,
    manufact: "Samsung",
    item: "Galaxy S20",
    descr: "Great phone works well",
    avail: 3,
    price: 399.99,
  },
  {
    id: 103,
    manufact: "Apple",
    item: "iPhone 13",
    descr: "New and Shiny, Nothing better",
    avail: 13,
    price: 1299.99,
  },
  {
    id: 104,
    manufact: "Apple",
    item: "iPhone 12",
    descr: "Refurbished but perfect",
    avail: 13,
    price: 899.99,
  },
  {
    id: 105,
    manufact: "Apple",
    item: "iPhone 11",
    descr: "Works great!",
    avail: 12,
    price: 599.99,
  },
];
let warranty = [
  { id: 0, plan: "None", cost: 0 },
  { id: 1, plan: "Extended", cost: 0.15 },
  { id: 2, plan: "Normal", cost: 0.1 },
  { id: 3, plan: "Base", cost: 0.05 },
];
let title = "Teds Technology Treasures";
ReactDOM.render(
  <React.StrictMode>
    <MTWork title={title} phones={inventory} wrnty={warranty} />
  </React.StrictMode>,
  document.getElementById("root")
);

THIS IS MY MTWork.js

import { useState } from "react";

function MTWork(props) {
  const { phones, title, wrnty } = props;

  const [name, setName] = useState("Kels");
  const [itm, setAndroid] = useState();
  const [Atem, setApple] = useState();
  const [Warrant, setWarranty] = useState(0);
  const [total, setTotal] = useState(0);

  function updateName(n) {
    setName(n.target.value);
  }
  function updateAndroid(a) {
    setAndroid(a.target.value);
  }
  function updateApple(ap) {
    setApple(ap.target.value);
  }
  function updateWarranty(w) {
    setWarranty(w.target.value);
  }

  function doOrder() {
    let total = 0;
    let total2 = parseFloat(itm) + parseFloat(Atem);
    let wTotal = total2 * parseFloat(Warrant);
    total += total2 + wTotal;
    return setTotal(total);
  }

  return (
    <div>
      <div className="container-fluid">
        <div className="row">
          <div className="col">
            <h1>
              <span className="title">{title}</span>
            </h1>
          </div>
        </div>
        <div className="row">
          <div className="col-4">
            Name: <input type="text" value={name} onChange={updateName} />
            <br />
            Android Phone:
            <select onChange={updateAndroid} value={itm}>
              {phones.map((phn) => (
                <option key={phn.id} value={phn.price}>
                  {phn.item}
                </option>
              ))}
            </select>
            <br />
            Apple Phone:
            <select onChange={updateApple} value={Atem}>
              {phones.map((Apn) => (
                <option key={Apn.id} value={Apn.price}>
                  {Apn.item}
                </option>
              ))}
            </select>
            <br />
            Warranty:
            <select onChange={updateWarranty} value={Warrant}>
              {wrnty.map((wrn) => (
                <option key={wrn.id} value={wrn.cost}>
                  {wrn.plan}
                </option>
              ))}
            </select>
            <br />
            <button className="btn btn-dark" onClick={() => doOrder()}>
              Order
            </button>
            <h2 style={{ color: "blue" }}>Results For Name: {name}</h2>
            <table className="table">
              <tbody className="color">
                <tr>
                  <th>Manufacturer:</th>
                  <th>Item:</th>
                  <th>Cost:</th>
                </tr>
                <tr>
                  <td scope="row">{phones.maunfact}</td>
                  <td scope="row">{phones.price}</td>
                  <td scope="row">{itm}</td>
                </tr>
                <tr>
                  <td scope="row">{phones.manufact}</td>
                  <td scope="row">{phones.price}</td>
                  <td scope="row">{Atem}</td>
                </tr>
                <tr>
                  <td>Warranty</td>
                  <td scope="row">{props.plan}</td>
                  <td scope="row">{Warrant}%</td>
                </tr>
                <tr>
                  <td scope="row">Total </td>
                  <td scope="row"></td>
                  <td scope="row">{total} </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}
export default MTWork;

Answer 1

You are storing the price in your selection state.

You should instead store the selection by the id (which will be unique).

That way you can always find the item in your phones/inventory array by id and then get any of the properties (manufact, item, price, desc, avail).

---

function MTWork(props) {
  const { phones } = props;
  const [selectedId, setSelectedId] = useState(); // store id

  function updatePhone(event) {
    setSelectedId(event.target.value);
  }

  const selectedPhone = phones.find((phone) => phone.id == selectedId) || {};

  return (
    <div>
      Phone:
      <select onChange={updatePhone} value={selectedId}>
        {phones.map((phone) => (
          <option key={phone.id} value={phone.id}>
            {phone.item}
          </option>
        ))}
      </select>
      <table>
        <tbody>
          <tr>
            <th>manufact:</th>
            <th>item:</th>
            <th>price:</th>
            <th>desc:</th>
            <th>avail:</th>
          </tr>
          <tr>
            <td>{selectedPhone?.manufact}</td>
            <td>{selectedPhone?.item}</td>
            <td>{selectedPhone?.price}</td>
            <td>{selectedPhone?.descr}</td>
            <td>{selectedPhone?.avail}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

---

const selectedPhone = phones.find((phone) => phone.id == selectedId) || {};

Uses Array.find on the phones array to get the phone that has the same id as selectedId. If it can't find a match it will return undefined, so we assign a value of empty object {} to selectedPhone.