Props vs. State: The Battle of React Components

Alright, folks, it's time to dive into the epic showdown of React components: Props vs. State. Buckle up and prepare for some mind-blowing insights into these powerful tools. Let's cut the fluff and get straight to the heart of the matter.

Props, my friends, are like arguments to a function. Picture React components as these magnificent functions that return JSX magic. And when you want to reuse a piece of code, just pop it into a function and pass dynamic values as arguments. But in JSX land, instead of the usual function call, we rock the JSX syntax with those fancy attributes. These attributes, my dear readers, are what we call props.

Imagine you have this cool JSX snippet: <Add n1={2} n2={3} />. The props for our Add component would be { n1: 2, n2: 3 }. And when we render this beauty, we get 2 + 3 = 5. Props can be anything under the sun—numbers, strings, arrays, objects, or even functions. The sky's the limit!

But wait, what if we want to set a default value for n2 in case someone forgets to provide it? Props, unfortunately, have a limitation: they're not mutable. So no sneaky business-like props.n2 = 0. Trust me, it won't work. But fear not, we have solutions! One option is to create a local variable within the component, like so:

function Add(props) {
  let n2 = props.n2;
  if (typeof n2 === 'undefined') {
    n2 = 0;
  }
  return (
    <div>
      {props.n1} + {n2} = {props.n1 + n2}
    </div>
  );
}

Alternatively, you can embrace the destructuring syntax with default values (my personal favorite):

function Add({ n1, n2 = 0 }) {
  return (
    <div>
      {n1} + {n2} = {n1 + n2}
    </div>
  );
}

Beautiful, right? But what if we want to dynamically change the prop value? Say hello to our savior: State.

State, my friends, is the superhero of changing data over time. It's perfect for our situation. Behold the mighty power of React state:

function AddWithInput(props) {
  const [n2, setN2] = React.useState(0);

  function handleInputChange(event) {
    const input = event.target;
    const newN2 = Number(input.value);
    setN2(newN2);
  }

  return (
    <div>
      {props.n1} +{" "}
      <input type="number" value={n2} onChange={handleInputChange} /> ={" "}
      {props.n1 + n2}
    </div>
  );
}

Now we're cooking! React state tracks data values over the component's lifetime, and it's here to save the day. But hold your horses—there's a slight catch. With the current implementation, users of the AddWithInput component can't set the initial value of n2 anymore. Fear not, my comrades, for we have a fix! We can use props to initialize our state:

function AddWithInput({ n1, initialN2 = 0 }) {
  const [n2, setN2] = React.useState(initialN2);

  // ... more awesome code ...

  return (
    <div>
      {n1} + <input type="number" value={n2} onChange={handleInputChange} /> ={" "}
      {n1 + n2}
    </div>
  );
}

Voilà! Now if someone blesses us with <AddWithInput n1={2} n2={3} />, behold the marvel before you: 2 + 3 = 5. The initial input value is set to 3, and we're rocking it.

To wrap it up, my dear readers, props are the brave warriors, the arguments that charge into battle, ready to serve our components. State, on the other hand, is the ever-changing hero that persists throughout the component's lifetime.

I hope this has shed some light on the epic Props vs. State showdown in React. Remember, it's a fundamental concept that can elevate your React game. Now go forth and conquer! Test yourself with the little app below. Can you spot the state? Can you spot the props?

May the React gods smile upon you, and good luck on your coding adventures!