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;

// 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>