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' : .15 },
{ 'id': 2, 'plan' : 'Normal', 'cost' : .1 },
{ 'id': 3, 'plan' : 'Base', 'cost' : .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;```
[This is how the final product should look like in the end.)[1]
[1]: https://i.stack.imgur.com/mxBOK.png
