How to access name of elements in React useState - reactjs

Question

I'm trying to setup a component that lists a bunch of titles. Each title has a '+' next to it and when you click on the '+', another component will show that has more information. I know how to do this so that only one component can show at a time, but I wanted to make it so that multiple components could be viewed at once.
This is my code so far
import React, { useState, useEffect } from "react";
import MattressUpgrade from "./CamperMods/MattressUpgrade";
const CamperModsContainer = () => {
const [iconType, setIconType] = useState({
mattressUpgrade: "",
});
const [show, setShow] = useState({
mattressUpgrade: false,
});
useEffect(() => {
setIconType({
mattressUpgrade: "fas fa-plus-square",
});
setShow({
mattressUpgrade: false,
});
}, []);
let onClickHandler = (event) => {
event.preventDefault();
let payload = event.currentTarget;
toggleShow(payload);
};
const toggleShow = (payload) => {
debugger;
if (payload.value === true) {
setIconType.payload.id("fas fa-minus-square");
setShow.payload.id(true);
} else if (payload.value === false) {
setIconType.payload.id("fas fa-plus-square");
setShow.payload.id(false);
}
};
return (
<div>
<h1>Camper Modifications</h1>
<p>
As much as we love the Wolf Pup (aka the &apos;Gray Ghost&apos;), there
are some things that we tweaked...
</p>
<div className="flex-row">
<h3>Mattress Upgrade</h3>
<button
type="button"
id={show.mattressUpgrade.key}
value={show.mattressUpgrade}
className={iconType.mattressUpgrade}
onClick={onClickHandler}
></button>
</div>
{show === true && <MattressUpgrade />}
</div>
);
};
export default CamperModsContainer;
The problem is that setting the id to id={show.mattressUpgrade.key} doesn't work. When I hit the debugger in the toggleShow I can access payload.value and get a value of false. But if I try to do payload.id it gives back an empty string and I can't figure out why.

Answer 1

I believe you are looking for computed properties, but there are several other misunderstandings here that are worth highlighting.
A general suggestion is to try to keep datatypes consistent when possible. Converting between a string an boolean is hard to follow and debug. If you end up switching between more complex datatypes (objects, etc) it becomes very error prone.
The first problem is that show.mattressUpgrade.key does not work, and it will never work. key is accessed as an object property on show.mattressUpgrade, but show.mattressUpgrade is not an object, its false. You can expand and run the below snippet to see that accessing a property on false yields undefined, and assigning undefined as the input's id results in e.target.id of an empty string.
const Example = () => {
const test = false;
console.log('test.property', test.property);
const handleChange = (e) => {
console.log(e.target.id)
}
return <input id={test.property} onChange={handleChange} />
}
ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I can't tell you how you should set the id for the button's in your code because there is only one in your example, but this is why id does not work.
As for the updating state dynamically, setShow.payload.id this is not the right way to go. setShow is a function, not an object. Even if it were, you would not be referencing it by the variable payload.id, you would be attempting to access a literal nested property called "payload" then "id". Even further, id is not expected to be a function, but you still call it as one.
To access object properties dynamically, you use array syntax (ojb['property']). Your function would then be something like this:
const toggleShow = (payload) => {
debugger;
if (payload.value === true) {
setIconType(prev => ({...prev, [payload.id]: "fas fa-minus-square"}));
setShow(prev => ({...prev, [payload.id]: true}));
} else if (payload.value === false) {
setIconType(prev => ({...prev, [payload.id]: "fas fa-plus-square"}));
setShow(prev => ({...prev, [payload.id]: false}));
}
};
Notice we also use a functional update and spread prev into the new object in order to keep any values that are not explicitly replaced.