Knowledge check: JSX - Advanced React

Let’s suppose you have the below JSX that gets returned from a component, what would be the equivalent object representation (Element) that React will create internally?

  <button className='button-primary'>
     <div>
         Submit
     </div>
  </button>

  {
      type: "button",
      props: {
          className: "button-primary",
          children: {
              type: "div",
              children: "Submit"
          },
      },
  }

  {
      type: "button",
      props: {
          className: "button-primary",
          children: {
              type: "div",
              props: {
                  children: "Submit",
              } 
          },
      },
  }

   {
      type: Button,
      props: {
          className: "button-primary",
          children: "div",
      },
  }

What is the concept of component specialization?
- A component defined as a special case of another more generic component.
- A component that is designed to fulfill one specific purpose and nothing else.
- A component that doesn’t know its children ahead of time and acts as a generic box.

You would like to clone a React element by using the React.cloneElement API, where the particular element has the below structure:

 const buttonElement = {
   type: SubmitButton,
   props: {
     color: "green",
     children: "Submit!",
   },
 };

What would be the value of the variable output when using the API with the following parameters?

 const output = React.cloneElement(buttonElement, {disabled: true, color: “blue” });

  {
    type: SubmitButton,
    props: {
      color: "blue",
      children: "Submit!",
      disabled: true,
    },
  };

  {
    type: SubmitButton,
    props: {
      disabled: true,
      color: "blue",
    },
  };

  {
    type: SubmitButton,
    props: {
      color: "green",
      children: "Submit!",
      disabled: true,
    },
  };

Imagine you are using the spread operator in the below component as follows:

 const props = { title: "tiramisu", cal: 400 };
 const element = <Component title="cake" {...props} cal={500} />;

What would be the value of element.props?

```
  { title: "cake", cal: 500 }
```
```
  { title: "cake", cal: 400 }
```
```
  { title: "tiramisu", cal: 500 }
```
```
  { title: "tiramisu", cal: 400 }
```

Amongst the below expressions, select all that will not render anything on the screen when being used in JSX.
- ```
  <div>{false}</div>
```
- ```
  <div>{undefined}</div>
```
- ```
  <div>{null}</div>
```
- ```
  <div>{(() => true)()}</div>
```