tiles.js

class titles extends Component {
  state = {
    youtube: [], // store only youtube
    articles: []
  };

  populateTiles = () => {
    console.log("Get data");
    const newData = [
      {
        title: "bobo",
        note: "lorem ipsum",
        type: 'youtube'
      },
      {
        title: "anna",
        note: "lorem ipsum2",
        type: 'article'
      }
    ];

    const youtube = [];
    const articles = [];

    newData.forEach(item => {
      if (item.type === 'yotube') {
        youtube.push(item);
      }
      else if (item.type === 'article') {
        articles.push(item);
      }
    })

    this.setState({youtube, articles})
  };

  render() {
    return (
      <div style={{ border: `1px solid red`, padding: `50px ` }}>
        <h1>hello</h1>
        <button onClick={this.populateTiles}>Click Me</button>

        {this.state.youtube.map(tile => (
          <div>
            <h1>{tile.title}</h1>
            <p>{tile.note}</p>
          </div>
        ))}

        {this.state.articles.map(tile => (
          <div>
            <h1>{tile.title}</h1>
            <p>{tile.note}</p>
          </div>
        ))}
      </div>
    );
  }
}