Access state in parent higher-order component

I’m trying to develop a WordPress Gutenberg block here. How can I reformat my code to be able to have access to the searchTerm state (defined in the class) in the parent higher-order component defined at the end of the following snippet? I do not want to define a new attribute, but to actually find a way to use the defined state.

const { __ } = wp.i18n;
const { TextControl } = wp.components;
const { withSelect } = wp.data;
const { Component, Fragment } = wp.element;

class SearchControl extends Component {

constructor() {
super( …arguments );

this.state = {
searchTerm: null,
};
}

onChangeSearchInput = ( value ) => {
this.setState( { searchTerm: value } );
};

render() {

const {
posts,
searchTerm,
isRequesting,
attributes: {
postData,
postType,
searchMessage,
showCategory,
showAuthor,
showImage
},
setAttributes,
} = this.props;

const { searchTerm } = this.state;

return (

<Fragment>
<TextControl
type=”search”
value={ searchTerm }
placeholder={ __( ‘Type in the post title’ ) }
onChange={ this.onChangeSearchInput }
/>
</Fragment>
);
}

}

export default withSelect( ( select, state ) => {
const { getEntityRecords } = select( ‘core’ );
const { searchTerm } = state;

return {
posts: getEntityRecords( ‘postType’, ‘post’, { search: searchTerm, per_page: 10 } ),
};
} )( SearchControl );

Read more here:: Access state in parent higher-order component

Leave a Reply

Your email address will not be published. Required fields are marked *