Q:

How to get access to redux props wit condtional rendering

I am using redux to fetch my data from my component, at this time all was work fine, but now I need to use conditional rendering so I create a new functionInteractions that will fetch the data and filter and all this, but I am getting the error TypeError: Cannot read property 'props' of undefined but if I take my this.props.feeds outside my function that is working well, so the question is how can I have access to my redux props inside my Interactions function ?
class Feed extends React.Component {

componentDidMount() {

    this.props.fetchActivityFeed();
}

render() {

    console.log(this.props.feeds) // this is working

    function Interactions() { 
         //Getting error here
        this.props.feeds.filter(({type}) => type === 
        'Interaction').map(( activity, i) => {
                return(<p> {activity.description}</p>);
            }
        )
    }

    const panes = [
        {
            menuItem: 'All',
            render: () => <Tab.Pane  attached={false}>  /* Here I need 
            to render my Component <Interactions/>*/ </Tab.Pane>,
        },
        {
            menuItem: 'Interactions',
            render: () => <Tab.Pane attached={false}> <Interactions/> 
        </Tab.Pane>,
        },
        {
            menuItem: 'Tasks',
            render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
        },
        {
            menuItem: 'Expenses',
            render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
        },
    ];
    return (
        <div> <Interactions /> </div>
    );
}

const mapStateToProps = state => ({
    feeds: state.ActivityFeedReducer
});

export default connect(mapStateToProps, {fetchActivityFeed})(Feed);

PS : I need to have a Component to render

A:

You are creating a component (<Interactions />) inside another component (<Feed />), and you are not passing the second one any props. You have a scope problem here.
Here is what I would do to fix this. File separation like so: 
Feed component:
class Feed extends React.Component {

componentDidMount() {
    this.props.fetchActivityFeed();
}

render() {
    return (
        <div> 
          <Interactions feeds={this.props.feeds} />
        </div>
    );
}

Interactions component:
function Interactions({feeds}) { 
  return (
    <div>
      {feeds && feeds.filter(({type}) => type === 
        'Interaction').map(( activity, i) =>
            <p>{activity.description}</p>)
        )}
    </div>
  )
}

