SolvedSemantic UI React Search Component: Unknown props error

imns
188

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.

41 Answers

โœ”๏ธAccepted Answer

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.

Other Answers:

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")?

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.

Whoa, looks like I misunderstood this one completely guys. Appreciate the extra effort to reach me. The user should definitely have full control over every prop used in all our components.

@jcarbo your eyes appreciated on this:

Looking at the code again, it looks like there is no way for the user to control the props of the <SearchResult /> as the resultRenderer does not render the SearchResult itself but only the children of the SearchResult. Whilst, we are spreading all the original SearchResult props on the actual SearchResult with no hook for the user.

My thinking is that the renderResult should require the user to return a Search.Result or its shorthand. In other words, we should be using a shorthand factory here, SearchResult.create(). This way, they are in full control of the props on the SearchResult itself, and not the children only. Otherwise, they have no way to filter the props that are applied to the SearchResult.

Thoughts?

(comment updated)

Hi
I've just struggled myself, but there is a more or less simple solution to this problem. Code:

// Some extra fields
// childKey is important! Otherwise o.title is used by default for <SearchResult> key
// and may lead to errors 
const mapToSearchResult = map(o => ({
      childKey: o.id,                                              //!!!!!
      as: IngredientsSearchResultWrapper,         //!!!!!
      id: o.id,
      title: o.title,
      image: o.picUrl,
      shortDesc: o.shortDescription || '',
      fullDesc: o.fullDescription || ''
    }))
const IngredientsSearchResultWrapper = (params) => (
  <div className={params.className} onClick={e => params.onClick(e)}>
    {params.children}
  </div>
)

const IngredientsSearchResult = ({id, title, image, shortDesc, fullDesc}) => {
  const style = !!image ? {backgroundImage: `url(${ingredient_pic_search(image)})`} : {}

  return (
    <div key={id}>
      <div className="pic" style={style}></div>
      <div className="main">
        <div className="title">{title}</div>
        {!!shortDesc &&
          <div className="desc">{shortDesc}</div>
        }
      </div>
    </div>
  )
}

<Search
      resultRenderer={IngredientsSearchResult}
      onResultSelect = {onResultSelect}
      onSearchChange = {onSearchChange}
      results = {results}
      minCharacters = {0}
      fluid
      value = {value}
      open = {true}
    />

Why consumer of this component being force to use object schema predefined by author/contributor of this component, which is like {title, price, etc...} at-lease result renderer should be given free hand to decide whatever props we want to use to render the result.

Related Issues:

127
Semantic UI React React Router Links and MenuItems
This was solved by component augmentation #414 See the docs for more. ran into issues with trying to...
17
Semantic UI React 'event.target.value' are 'undefined' of 'onChange(event)' for 'Checkbox', 'Radio', and 'Dropdown'
This is a known limitation The event.target is a browser event property However many Semantic UI com...
17
Semantic UI React Dropdown selection auto select first option
@neokio probably a little late with the response but.. just set selectOnBlur to false This will stop...
15
Semantic UI React Docs about webpack + custom css
@bali182 - I found this blog post super helpful in setting up SemanticUI + webpack with a custom the...
14
Semantic UI React Please document how to import js into a 'create-react-app' project
I'm using this in CRA and it's quite simple You're almost there You just need to import the componen...
14
Semantic UI React Prepare for upcoming react deprecations introduced in 16.3
Fixes for lifecycles were released in semantic-ui-react@1.0.0 ๐ŸŽ‰ Suggestion: begin migration to new ...
13
Semantic UI React correct way to import CSS ?
Noobie mistake sorry This did the trick. I am using Webpack 1 ...
12
Semantic UI React Deprecated functional components throw TypeError: Cannot call a class as a function
Possible help to others I just ran into a very similar issue: In my case I was simply missing Image ...
11
Semantic UI React Search Component: Unknown props error
All our components consume their own props and pass the extra props along (best practice) This may b...
11
Semantic UI React Modal: resizing/transition issue on every current browser
className=scrolling is a workaround for this. Hi we found a bug while using the semantic react dialo...
11
Semantic UI React Update SUIR to be compatible with SUI 2.3
@franckboudraa and for anyone landing here I would recommend against what you have proposed for .vis...
9
Semantic UI React Icons are not displaying (fonts not loading in CRA)
@levithomason I had done a silly mistake I tried to reproduce the issue by creating a basic project ...
5
Semantic UI React Menu dropdown icon position/two icons
With above code you cant set up a Dropdown but you can't align icon left nor you can't have two icon...
3
Semantic UI React CreateReactApp: Module not found on build
Investigated a bit it's caused by react-scripts@3.1.0 and by this change: facebook/create-react-app#...
174
bootstrap vue Dynamic property for v-b-toggle
v-b-toggle does accept a dynamic value to specify a single target ID Not do not include the # as it ...
111
bootstrap vue How to hide OK or Cancel buttons on Modal?
Add property in b-modal component hide-footer=true Hi In the docs it says: You can customize the siz...
109
ng packagr feat: peerDependencies and devDependencies auto whitelist.
@codegagan you can remove the warnings by adding the below to ng-packagr.json right next to lib prop...
96
ng packagr Please add a @NgModule annotation in AOT Compilation
Don't know if it helps but i had the same issue : Turns out my generated metadata [library].metadata...
70
bootstrap vue How to use event row-clicked <b-table>.
Hi guys I'm trying to use event row-clicked to fill some props when click on a b-table row Tried to ...
52
ng packagr TypeError: Cannot read property 'length' of undefined
@johnnyprogger you saved my day! The error in my case was with incorrect template paths... ...
42
ng packagr UnhandledPromiseRejectionWarning on ng-packagr@2.0.0-rc.13
I don't get the error once I move public_api.ts into the src directory I'm not sure why the location...
36
ng packagr BrowserslistError: Unknown version 67 of android
@mrtijn I was able to fix it by taking these steps: 1.Deleting the entire node_modules directory 2.D...
28
ng packagr Add option to publish a library built with ivy
@ocombe IMO this should be re-opened ๐Ÿ™ I'm not sure what the benefit is for ng-packagr to enforce t...
20
ng packagr problem with momentjs
@ranglang the namespace fix worked for me Type of Issue Description I have a build error when I incl...
19
ng packagr WARNING: '__read' is imported from external module 'tslib' but never used
Something which is probably related to this problem as well On my library project I was getting many...
16
bootstrap vue Babel Errors in nuxt generate 2.14
@amdp BootstrapVue Usage BootstrapVue icons ARE not automatically installed when using BootstrapVue ...
16
ng packagr Building a library with dependent libraries defined via paths
I've also run into this problem and I have found a solution that appears to work (it lets me build m...
14
ng packagr Update example on how to package lib SCSS in ng v6
I dislike these solutions involving a post build step Type of Issue Is it possible to generate css f...
13
Fomantic UI Fomantic and yarn - install issues
@mathieutu I just did some more research into this and figured out a way around the issue ...
13
ng packagr maximum call stack size exceeded (index.ts)
I was able to fix it: When using a file (model mostly) inside a folder with the same name the maximu...
13
ng packagr [AoT] can't resolve all parameters for [lib] in [lib].d.ts: (?, ?, ?)
Ah ok sure see below for what I think were the errors in my case 1- I had an index.ts with export of...
11
ng packagr fullTemplateTypeCheck: Cannot read property 'type' of null
I found one case where isSkipSelf of null relates to fullTemplateTypeCheck Die to the error message ...
11
ng packagr [BUG] No such file or directory, open 'node_modules\src\util\root.ts'
I tried npm install uglify-js@3.3.18 but the problem seems still exists. Type of Issue Description V...
5
ng packagr "Cannot create property 'modifierFlagsCache'" when using string-based enums
I have the same problem and it's worth to know that setting strings on Enum are available only since...
4
fast rfc: separate 'value' and 'initial-value' concepts for FAST form-associated controls
@nicholasrice @EisenbergEffect I'd like to propose that we resolve on the approach suggested of leav...
3
react virtuoso v1 beta is available - test now if you are building chat / feed interfaces
Huge thank you everyone for the feedback the contributions and the testing v1 is now official and pu...
469
next.js Module not found: Can't resolve 'fs'
Update for modern Next.js (9.4+) You can safely use fs within getStaticProps or getServerSideProps n...
275
ngx bootstrap fix(tooltip): tooltip flickering when hover the mouse on the border on the tooltip position
Add pointer-events: none; to the tooltip css problem solved! .tooltip { pointer-events: none; } ...
175
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
167
preact Add Hooks API
It looks like we're going to be releasing hooks support as an opt-in import so you only pay for them...
149
next.js Adding GA script tag?
No need for react-ga Use the google tag manager with the <Head> component to inject analytics ...
111
storybook babelHelpers is not defined using Rollup [Solved]
@alejandronanez you can remove external-helpers from your .babelrc file and enable it back only on y...
100
next.js getServerSideProps cannot be serialized as JSON. Please only return JSON serializable data types
@timneutkens I don't get why this issue is closed It seems quite a lot of people are still stumbling...
90
next.js Could not freeze filename
It has happened to me deleting the cache solved it rm -rf node_modules/.cache Recently I've updated ...
90
next.js Ability to co-locate non-page files in the pages directory
@probablyup this is so easy set pageExtensions as below a file tree like below and only /list page a...
86
next.js Nextjs causing hard refresh when i click in the Link
Have you tried this format for your Link? Here is a good example of this type of routing for dynamic...
84
next.js Link as styled component
Hey guys At version 3.0.1-beta.13+ I followed #799 but couldn't get a clean way to have a styled-com...
84
next.js Cannot import Typescript files from outside of 'dir' directory
If anyone needs this right now it is available as an experimental feature in 10.1.2 An example next....
83
ngx bootstrap How to pass data to modal ngx-bootstrap and receive return data ?
here is how you send information back to parent component ( calling component) create a EventEmitter...
83
next.js Image optimisation external resource not working
@raphaelbs I had a similar issue in that it worked locally but not in prod Bug report Describe the b...