Search Component: Unknown props error

I have a search component with a custom renderer and I keep getting the error Warning: Unknown props _id, url, ... on <div> tag. Remove these props from the element..

The array I pass to results has these extra props, mentioned in the error, but I am using a custom renderer, so it seems to me they should be ignored.

Here is my custom renderer

const resultRenderer = ({ _id, name, url, logo}) => {
    return (
        <div key={_id}>
            <Label content={name}  />
        </div>
    )
}

resultRenderer.propTypes = {
  name: PropTypes.string
}

My component is really simple

export default class CompanyForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            value: '',
            results: [],
            company: null
        };
    }

    handleResultSelect(e, result) {
        this.setState({
            value: result.name,
            company: result
        });
    }

    handleSearchChange(e, value) {
        this.setState({
            value: value
        });       
        client
            .service('/api/companies')
            .find({
                query: {
                    name: {'$search': value }
                }
            })
            .then(results => {
                this.setState({
                    isLoading: false,
                    results: results.data
                });
            })
            .catch(err => {
                console.error(err);
            })
        
    }

    render() {
        const {isLoading, value, results} = this.state;
                
        return (
            <Search
                loading={isLoading}
                onResultSelect={this.handleResultSelect.bind(this)}
                onSearchChange={ this.handleSearchChange.bind(this)}
                results={results}
                value={value}
                resultRenderer={resultRenderer}
            />
        );
    }
}

The above code is what’s causing the warning.

[imns]

All our components “consume” their own props and pass the extra props along (best practice).

This may be the best practice, but annoying in this instance as I assumed defining a custom renderer would allow me to decide what props are passed to the rendered element.

I’d also like to say that I agree with @koernchen02 and either would like to be able to define custom fields like he talks about or have the control over which props get used in the custom renderer.

[koernchen02]

I have to ask this again… You are saying the OP has to remove the extra keys from each result object before passing … results.data to the results prop. But how is it then possible to use the properties in the customRenderer for a single result? In the example code he wants to assign the id as the result-div’s key via <div key={_id}> how is this possible if the _id property has gotten removed from each single result? Is it at all possible, to use custom fields (other than “title”, “description”, “price” and “image”)?