Input: var arr = [1, 6, 107, 3, 5, 19];

// Solution 1:
import React from 'react';

class SecondLargestNumber extends React.Component {
  findSecondLargest(arr) {
    const uniqueSortedArr = [...new Set(arr)].sort((a, b) => b - a);
    return uniqueSortedArr[1];
  }

  render() {
    const numberArray = [1, 6, 107, 3, 5, 19];
    const secondLargest = this.findSecondLargest(numberArray);

    return (
      <div>
        Array: {numberArray.join(', ')}
        <br />
        Second Largest Number: {secondLargest}
      </div>
    );
  }
}

export default SecondLargestNumber;

// Solution 2:
import React from 'react';

class SecondLargestNumber extends React.Component {
  findSecondLargest(arr) {
    if (arr.length < 2) {
      return "Array should have at least two numbers.";
    }

    // Sort the array in descending order
    const sortedArr = arr.sort((a, b) => b - a);

    // Find the second largest number
    const secondLargest = sortedArr[1];
    return secondLargest;
  }

  render() {
    const numbersArray = [1, 6, 107, 3, 5, 19];
    const secondLargestNumber = this.findSecondLargest(numbersArray);

    return (
      <div>
        Array: {numbersArray.join(', ')}
        <br />
        Second Largest Number: {secondLargestNumber}
      </div>
    );
  }
}

export default SecondLargestNumber;

Input: "aaabbcccdd" Output: "3a2b3c2d"

// Solution 1:
function compressString(input) {
  let result = '';
  let count = 1;

  for (let i = 1; i <= input.length; i++) {
    if (input[i] === input[i - 1]) {
      count++;
    } else {
      result += count + input[i - 1];
      count = 1;
    }
  }

  return result;
}

const inputString = "aaabbcccdd";
const compressedString = compressString(inputString);
console.log(compressedString); // Output: "3a2b3c2d"

// Solution 2:
import React from 'react';

class StringCompressor extends React.Component {
  compressString(input) {
    let compressedString = '';
    let count = 1;

    for (let i = 1; i < input.length; i++) {
      if (input[i] === input[i - 1]) {
        count++;
      } else {
        compressedString += count + input[i - 1];
        count = 1;
      }
    }

    // Handle the last set of consecutive characters
    compressedString += count + input[input.length - 1];

    return compressedString;
  }

  render() {
    const inputString = 'aaabbcccdd';
    const compressedString = this.compressString(inputString);

    return (
      <div>
        Input: {inputString}
        <br />
        Output: {compressedString}
      </div>
    );
  }
}

export default StringCompressor;

// The key attribute is used to uniquely identify elements
// in a list of React components. When React renders a list,
// it uses the key attribute to efficiently update and reorder
// components without re-rendering the entire list. Keys should
// be unique among siblings but don't need to be globally unique.

const myList = [1, 2, 3];
const listItems = myList.map(number => (
  <li key={number}>{number}</li>
));

// Render the list
<ul>{listItems}</ul>

Props (short for properties):

1. Props are used to pass data from a parent component to a child component.
2. They are immutable and are set by the parent component.

// Parent Component
function ChildComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

State:

1. State is used to manage the internal state of a component.
2. It is mutable and controlled by the component itself.
3. When the state changes, the component re-renders.

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }
  render() {
    return <div>Count: {this.state.count}</div>;
  }
}