What I am trying to do is render the contents of the dictionary corresponding to each index, which I will have to modify later (both the key and value). Therefore, I have the following dictionary.
{0: {a: 'b'}
1: {c: 'd'}
2: {e: 'f'}
What I would want is to render it within a React.Fragment. Although indexed_data (the above dictionary) is populated, for some reason nothing is rendered in my component. I tried changing the way I returned the keys and objects with Object.keys or Object.values, but nothing worked. Can anyone please help me figure out what is going on? Thank you so much!
let i = 0;
let indexed_data = {};
const { state } = useLocation();
useEffect(() => {
for (let [key, value] of Object.entries(state)) {
let object = {};
object[key] = value;
indexed_data[i] = object;
i += 1;
}
}, []);
return Object.entries(indexed_data).map((elem, index) => {
return Object.entries(elem).map((number, product) => {
<div>
<React.Fragment>
{
<div className="column">
<EditText name="item" defaultValue={product} />
</div>
}
</React.Fragment>
</div>;
});
});
Okay. So let's switch things around a little bit.
Have an array of objects (I've switched the keys/values for something more informative for this example):
const arr = [{name: 'Bob'}, {name: 'Sue'}, {name: 'Rita'}];
Have two states: the first is the original data (in case you need to revert to it at some point); the second is the filtered data.
You can then map over the filtered array to produce your JSX.
I can't replicate everything in your code but this example should help clear up some misunderstanding.
const { useState } = React;
// Pass in the data
function Example({ arr }) {
// Initialise your states
const [ data, setData ] = useState(arr);
const [ filtered, setFiltered ] = useState(arr);
// `getItems` gets the filtered array as an argument
function getItems(filtered) {
// `map` returns a new array
return filtered.map((item, i) => {
// For each object we grab the key/value from the first
// element of its `Object.entries` (an array)
const [key, value] = Object.entries(item)[0];
// And return some JSX
// Note that we're using the `map` index to add
// both a key, and a data attribute to both the list
// item, and the button. We'll use that id when we
// remove the item.
return (
<li key={i} data-id={i}>
{key}: {value}
<button data-id={i} onClick={deleteItem}>Delete</button>
</li>
);
});
}
// When we click on a button we use the id (coerced from a data
// attribute string to a number) then filter out
// all the objects where the id doesn't match the filter index
// And then we reset the filtered state with that new array
function deleteItem(e) {
const { dataset: { id } } = e.target;
const a = filtered.filter((item, i) => Number(id) !== i);
setFiltered(a);
}
// Resets the data
function reset() {
setFiltered(data);
}
// Now we just call `getItems` with the
// filtered state as an argument
return (
<div>
<ul>{getItems(filtered)}</ul>
<button onClick={reset}>Reset</button>
</div>
);
}
const arr = [{name: 'Bob'}, {name: 'Sue'}, {name: 'Rita'}];
ReactDOM.render(
<Example arr={arr} />,
document.getElementById('react')
);button { margin-left: 1em; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>