( My first post)
I am having an issue with a nested object in react app . I am using a spread operator, relying on what I was taught class and what I’ve seen here.
Some questions have been written on a similar premise. But non helped and i am really stuck
Thank you
The console write : “Objects are not valid as a React child, If you meant to render a collection of childr case
I’m getting an error here:
"STREET": setUser({ ...user, address: { ...user.address, street: e.target.value } });
import { useState, useEffect } from "react";
import { getById, updateItem, deleteItem } from "../utils/utils.js";
import "./css/UserComp.css";
import TodosComp from "./TodosComp.jsx";
function UserComp(props) {
const userdata = props.userdata;
const URL_USERS = "https://jsonplaceholder.typicode.com/users";
const [user, setUser] = useState(userdata);
const [isHover, setHover] = useState(false);
const [isExtended, setExtended] = useState(false);
const updateUser = (e, type) => {
console.log(user);
switch (type) {
case "NAME":
setUser({ ...user, name: e.target.value });
case "EMAIL":
setUser({ ...user, email: e.target.value });
case "STREET":
setUser({
...user,
address: { ...user.address, street: e.target.value }
});
break;
case "CITY":
setUser({
...user,
address: { ...user.address, city: e.target.value },
});
break;
case "ZIP":
setUser({
...user,
address: { ...user.address, zipcode: e.target.value },
});
break;
default:
break;
}
console.log({ _user: user });
};
const updateDB = async (e) => {
let result, status;
({ result, status } = await updateItem(URL_USERS, userdata.id, user));
console.log({ updatUserSTat: result, status });
};
const deleteDB = async (e) => {
let result, status;
({ result, status } = await deleteItem(URL_USERS, userdata.id));
console.log({ updatUserSTat: result, status });
};
const setColor = () => {
const left_container = document.querySelector(".left-container");
if (left_container.style.backgroundColor === "white" && isExtended)
left_container.style.backgroundColor = "mistyrose";
else left_container.style.backgroundColor = "white";
};
const addTodoPart = () => {
const id_button = document.querySelector("#id-button");
id_button.addEventListener("click", () => {
setExtended(!isExtended);
});
console.log({ extended: isExtended });
};
useEffect(() => {
//on mount
console.log({ extended: isExtended });
}, []);
return (
//TODOS add color change when presing id
<div id="main" style={{ width: "600px" }}>
<div className="flex-container">
<div className="left-cotainer">
style=
{{
width: "50%",
margin: "2px",
float: "left",
border: "solid 1px black",
}}
<button
onClick={(e) => {
setExtended(!isExtended);
setColor();
}}
>
ID:{userdata.id}
</button>
<br />
Name:{" "}
<input
type="text"
defaultValue={userdata.name}
onChange={(e) => updateUser(e, "NAME")}
></input>
<br />
Email:{" "}
<input
type="text"
defaultValue={userdata.email}
onChange={(e) => updateUser(e, "EMAIL")}
/>
<br></br>
<button width="2px" onClick={(e) => updateDB(e)}>
UPDATE
</button>
<button width="2px" onClick={(e) => deleteDB(e)}>
DELETE
</button>
{/* address strart */}
<h6 onMouseOver={() => setHover(!isHover)}>Other Data</h6>
{isHover && (
<div id="address">
Street:
<input
type="text"
defaultValue={userdata.address.street}
onChange={(e) => updateUser(e, "STREET")}
/>
<br />
City:
<input
type="text"
defaultValue={userdata.address.city}
onChange={(e) => updateUser(e, "CITY")}
></input>
<br />
Zip Code:
<input
type="text"
defaultValue={userdata.address.zipcode}
onChange={(e) => updateUser(e, "ZIP")}
></input>
</div>
)}
</div>
{isExtended && (
<div
className="right-container"
style={{
width: "48%",
margin: "2px",
float: "right",
border: "solid 1px black",
}}
>
{/* <TodosComp data={user.id} /> */}
</div>
)}
</div>
</div>
);
}
export default UserComp;
