React JS update ARRAY of OBJECTS in state 🚘

#reactjs #tutorial #course

"You can put objects and arrays into state. In React, state is considered read-only, so you should replace it rather than mutate your existing objects. For example, if you have a form object in state, don’t mutate it:"

[BroCodez]

import React, { useState } from 'react';

function MyComponent() {

const [cars, setCars] = useState([]);
const [carYear, setCarYear] = useState(new Date().getFullYear());
const [carMake, setCarMake] = useState("");
const [carModel, setCarModel] = useState("");

function handleAddCar(){

const newCar = {year: carYear,
make: carMake,
model: carModel};

setCars(c => [...c, newCar]);

setCarYear(new Date().getFullYear());
setCarMake("");
setCarModel("");
}

function handleRemoveCar(index){
setCars(c => c.filter((_, i) => i !== index));
}

function handleYearChange(event){

}

function handleMakeChange(event){

}

function handleModelChange(event){

}

return (<div>
<h2>List of Car Objects</h2>
<ul>
{cars.map((car, index) =>
<li key={index} onClick={() => handleRemoveCar(index)}>
{car.year} {car.make} {car.model}
</li>)}
</ul>

<input type="number" value={carYear}
<input type="text" value={carMake} onChange={handleMakeChange}
placeholder="Enter car make"/><br/>
<input type="text" value={carModel} onChange={handleModelChange}
placeholder="Enter car model"/><br/>
<button onClick={handleAddCar}>Add Car</button>
</div>);
}

export default MyComponent;

[minsoojo]

Thanks for all the great videos, they've helped me a lot, and still do, whenever I'm trying to learn anything coding related!
Any plans in the future for Redux?

[xzex]

Bro if you were lazy, you certainly use (ALT + SHIFT + (up/down) Arrow key to copy the line you are in ( without selecting and copy and paste) and if you select a bunch of lines it will copy ( up or down another one

[Akash-xvsk]

npm run dev -- --host 0.0.0.0 --port 5173 is not working in the mobile do you have idea? Connected into same Router.

[recursion.]

Hi Bro, could you please make a video on "why react?" I still have no clue why people use react.

[thanos]

Hi BroCode

can you explain me the logic for how the element got removed

function handleRemoveCar(index){
setCars(c => c.filter((_, i) => i !== index));
}

I did not understand ( i !== index) part ??

[bitwise]

my carYear variable returned 2024 What do I do?

[The_Man..]

Hello bro, i've been struggling with this stuff for a while now,

can you make a video or explain here how can i edit and update the properties of an object that is inside of an useState array, thank you so much man, hope this comment reaches to you..

[_amonimus_]

Bro how many coding languages you know

[Turtlenigma]

dearest bro, would you start a discord bro code community? I can set it up if you dont have the time

[pastori]

Who's watching this in 2024 too 👇

[StiffShot]

Hey bro, could you please make a Visual Studio Code 22 full course tutorial?