React.js　検索したデータの抽出・表示について記述の仕方がわかりません。

React.jsにてコーディングしているのですが、プログラミング初心者のため、記述の仕方がわかりません。
検索してもあまりピンとくる記事が見つかりませんでしたので、質問いたします。

icons8のような素材の検索機能のwebアプリケーションを作っております。
その中で検索して、そのキーワードに当てはまるものを表示したいと思っております。
しかし、記述の仕方がさっぱりわからなくて困っております。

ご教授いただければ大変助かります。
よろしくお願いします。

現在、配列を表示するコンポーネントをこのように記述しております。。。！

import React, { Component } from 'react';
/* Styleguide Application */

class Main extends React.Component {

    render() {
        return (

          <div className="small-9 large-10 columns padding-top-3 result-wrap">

            <div className="row">
              <div className="margin-bottom-1 small-12 medium-12 large-12 columns title-wrap">
                <i className="fas fa-search"></i><h3 className="title">Search Results</h3>
              </div>
            </div>

          <div className="row">
            <div className="margin-bottom-4 small-6 medium-4 large-2 columns card-wrap">
              <a href="result.html">
                <div className="radius bordered shadow card">
                  <img src="https://placehold.jp/50x50.png" />
                  <div className="card-section">
                    <h4>This is a card.</h4>
                  </div>
                </div>
              </a>
            </div>

          </div>
          </div>

          );
    }
}

export default Main;