1. `props` vs. `children` - They're essentially

@yearworker

ago

public

earned

reactions

1. `props` vs. `children` - They're essentially the same thing.

`props` = all the arguments you pass to a component. It's an object.

`children` = a special prop. It's what you put *between* the component's tags.

```jsx
// Parent Component
<Card title="Employee" color="blue">
<p>Internal Content</p> // this is children

</Card>

// Card Component
function Card(props) {
console.log(props.title) // "Employee"
console.log(props.color) // "blue"
console.log(props.children) // <p>Internal Content</p>

return <div>{props.children}</div>
}
```
**Rule:** `props.title` is an attribute, `props.children` is the internal content. React automatically puts it in `props.children`.

2. Why `setAge(age => age + 1)`?

This is the **functional** form of the setter. You use it when your new value depends on the old one.

**The problem without this:**
```jsx
function handleClick() {
setAge(age + 1)

setAge(age + 1)
}
// If age = 0 initially, you expect 3. But you'll get 1.

// Because all 3 calls see the same `age = 0` (outdated closure). React batches the updates.

```

**The solution:**
```jsx
setAge(age => age + 1)
setAge(age => age + 1)
setAge(age => age + 1)
// Now React does: 0 => 1 => 2 => 3. It works!

// React ALWAYS passes you the latest updated value in `age`

```

> Remember: If you use `setState(newValue based on oldValue)`, always use `setState(prev => ...)`

3. Why `setSalary(employee => ({...employee, salary: employee.salary + 100}))`?

Here you combine two golden rules of React:

**a) `employee => ...`:** Same reason as for `age`. You want to be sure you have the employee's latest state.

**b) `...employee` (the spread):** In React, **you never mutate an object directly**. You must create a NEW object.

```jsx
// FORBIDDEN - React won't see the change
employee.salary = employee.salary + 100
setSalary(employee)

// CORRECT - You create a copy
setSalary(employee => {

return {
...employee, // you copy all the old props: name, age, position...
salary: employee.salary + 100 // and you only overwrite salary

}
})
```

If you do `setSalary({salary: 1500})`, you lose `name`, `age`, etc. The spread keeps everything else.

**Ultra-quick summary:**
1. `children` = the content prop between tags.

2. `age => age+1` = to avoid outdated values due to batching.

3. `...employe` = to respect immutability, a new object is created.

	earnings
	26,000 mlx total
	$0 total

	engagement
	48 views
	0 reactions

1. `props` vs. `children` - They're essentially the same…

0 comments