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

Question

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;

Answer 1

この記事が参考になるのではないでしょうか。

Reactでリスト（配列）のFilter機能とSort機能を実装する

Comments

[hitominjar]

ありがとうございます！無知で申し訳ないのですが、この記事の中の

＞dとnameを持ったオブジェクトの配列dataを用意し、この後作っていくAppコンポーネントに渡すようにします。

の部分ですが、このコードはどのように記述するのでしょうか。
質問欄に、「配列を表示するコンポーネント」を追記分に公開しました。

[karamarimo]

すぐ下に書いてある

render(
// 配列をAppコンポーネントに渡す
<App data={data} />, document.querySelector('.content')
);

だと思います。