他のコンポーネントからのhtml要素のIDを使用してjavascriptフィルタを使用する方法

Question

h4要素のIDをSpecificPostコンポーネントに渡す方法を見つけるのに苦労しているので、フィルタリングしてその特定のID 。

コンポーネントH4をクリックすると、それがクリックされた記事が表示されるときに、コンポーネント2がレンダリングされる1

render() { 
    var reversedPosts = Object.assign([], this.props.posts); 
    reversedPosts = reversedPosts.reverse(); 

    return (
    <div> 
     <div> 
     {reversedPosts.map((item) => 
     <div className="container"> 
      <div className="row"> 
      <div className="twelve columns"> 
       <h4 className="hoverh1" Id={item.Id} onClick={this.props.openedSpecificPost} >{item.question} <a className="tag">{item.postType}</a> </h4> 
      </div> 
     </div> 
     </div> 
    )} 
     </div> 
    </div> 
    ); 
    } 

。

const allPosts = Object.assign([], this.props.posts); 
    const Id = allPosts.filter(function(item) { 
     return item.Id == (need to grab the id from the h4 element); 
    }) 

My Project SpecificPost成分や投稿のコンポーネントで見てください。アプリでは最新の記事を見ることができます。投稿を見ることができます。クリックすると、それが設定されているので、idが100未満の投稿をフィルタリングして実行します。

Answer 1

現在のアイテムIDでthis.props.openedSpecificPostを呼び出すラッパー関数を渡すことができます。

<h4 
    className="hoverh1" 
    Id={item.Id} 
    onClick={_ => this.props.openedSpecificPost(item.Id)} 
> 
    {item.question} 
    <a className="tag">{item.postType}</a> 
</h4>