constの配列マップからレンダリングできません

Question

オプションを使用して選択をレンダリングするためにconstコンポーネントを作成する必要がありますが、オプションによってオプションが返されるため、オプションフィールドを表示できません。問題はどこですか？

アドバイスをいただきありがとうございます。

import React from "react"; 

const FilterSelect = (props) => { 
    const {title, name, selectedValue, optionsValue, onChange} = {...props}; 

    const renderOptions = (optionsValue) => { 
     optionsValue.map((optionValue, i) => 
      <option value={optionValue.value} key={i}>{optionValue.name}</option> 
     ); 
    }; 

    return (
     <div className="filters-content-block"> 
      <h3 className="filters-subtitle">{title}</h3> 
      <select className="sl sl-fullwidth" onChange={onChange} required> 
       {renderOptions} 
      </select> 
     </div> 
    ); 
}; 

export default FilterSelect; 

Answer 1

renderOptionsは機能です。パラメータとしてoptionsValueを渡す必要があります。またはrenderOptionsは、もはやそうのような機能が、配列、になるようにコードを変更しない：私の意見では

const renderOptions = optionsValue.map((optionValue, i) => 
    <option value={optionValue.value} key={i}>{optionValue.name}</option> 
    ); 

Answer 2

あなたはメソッドとしてrenderOptionsを定義し、それにoptionsValueを送ったのを忘れていました。

<select className="sl sl-fullwidth" onChange={onChange} required> 
    {renderOptions(optionsValue)} 
</select> 

Answer 3

renderOptionsは関数です。だから、そうのようにそれを呼び出す必要があります：

<select className="sl sl-fullwidth" onChange={onChange} required> 
    {renderOptions()} 
</select> 

あなたは小道具からそれを持っているので、あなたはoptionsValueのPARAMを取り除くことができます。あなたはその機能から戻る必要があります。これを検討してみてください：

const renderOptions =() => { 
     return optionsValue.map((optionValue, i) => 
      <option value={optionValue.value} key={i}>{optionValue.name}</option> 
     ); 
    };