Starting to try and learn React from vanilla HTML, I'm not really understanding the linking of certain objects and events with Arrays.
Basically I want to have a dropdown that the user can select an option, and then have that dropdown fill some textfields with certain values from inside the array.
In this case, Textfield 1 reads the filetype, textfield 2 reads the bitdepth
Current code is below. Note, using spectrum components so sp-picker instead of dropdown
I don't know how to get the Handler to read anything other than the event and likely this code is totally the wrong way to do this.
Any advice would be much appreciated.
import React, { useState } from "react";
const SaveOptions = () => {
//Default Options HOOKS
const [filetype, setFileType] = useState("TIFF");
const [textfieldValue, setTextfieldValue] = useState("16");
//ARRAY
const filetypeOptionsArray = [
{ name: "TIFF", extention: "TIFF", bitdepth: "16" },
{ name: "PSD", extention: "PSD", bitdepth: "16" },
{ name: "JPG", extention: "JPG", bitdepth: "8" },
]
// Handlers
const handleFiletypeChange = (e) => {
setFileType(e.target.value);
setTextfieldValue(e.target.value);
};
return (
<div style={{ border: "1px solid #555", padding: "5px", borderRadius: "5px" }}>
<div className="row" >
<sp-picker size="s" style={{ flexGrow: 1 }}>
<sp-menu slot="options" onClick={handleFiletypeChange}>
{
filetypeOptionsArray.map((e) => {
return <sp-menu-item selected={filetype === e.value ? true : null} key={e.name} value={e.name}>{e.name}</sp-menu-item>
})
}
</sp-menu>
</sp-picker>
</div>
<sp-textfield value={filetype}></sp-textfield>
<sp-textfield value={textfieldValue}></sp-textfield>
</div>
);
}
export default SaveOptions;
I believe this is what you're trying to do. Most of your code is right except for you attaching the onChange function to the onClick property instead of the onChange property
I've attached a basic example below because you used custom html elements in your code that I don't have access to.
const people = [
{
name: "John Doe",
age: 26,
},
{
name: "Jason Bourne",
age: 32,
},
{
name: "Steve Wang",
age: 19,
},
];
function App() {
const [option, setOption] = React.useState(null);
const [text, setText] = React.useState("");
const onChange = (ev) => {
const val = ev.target.value;
setOption(val);
const person = people[val];
if (person) {
setText(person.name + " is " + person.age);
}
};
return (
<div>
<select value={option} onChange={onChange}>
{people.map((person, index) => (
<option value={index} key={index}>
{person.name}
</option>
))}
</select>
<br />
<input
type="text"
value={text}
onChange={(ev) => setText(ev.target.value)}
/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>