React

by ronnjoe

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      newAray:[],
      results:[
  {
    "name": "Arun",
    "cars": [
      {
        "make": "Ferrari",
        "model": "La Ferrari"
      }
    ]
  },{
    "name": "Arthi",
    "cars": [
      {
        "make": "Bucati",
        "model": "Chiron"
      }
    ]
  },{
    "name": "Sirisha",
    "cars": [
      {
        "make": "McLearn",
        "model": "Senna"
      }
    ]
  },{
    "name": "Clement",
    "cars": [
      {
        "make": "Lamborghini",
        "model": "Adventedoor SVJ"
      }
    ]
  },{
    "name": "Joe",
    "cars": [
      {
        "make": "Ferrari",
        "model": "FXXK"
      }
    ]
  }
]

   	}
  }

  componentDidMount() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items,results,newAray } = this.state;
    if (error) {    
      results.map(item => {
          var tempArray = {}
          tempArray.name = item.name
          tempArray.make = item.cars[0].make
          tempArray.model = item.cars[0].model
          newAray.push(tempArray)
          });
          newAray.sort(function(a, b) {
    				var textA = a.make.toUpperCase();
    				var textB = b.make.toUpperCase();
	    			return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
					});
          console.log(newAray);
      return (
        <div>
        {
          newAray.sort((a, b) => a.make <...