react-autosuggest
react-autosuggest copied to clipboard
ability to derive Item key from item data
- write a clear description of what this Pull Request is trying to achieve
I need to make an async direct dom modification to components that I return from renderSuggestion and I'm creating a ref to them, but I'm finding that at times they end up pointing to old dom elements. I think without a key being specified on <Item />, old elements are being recycled.
What this PR does is allows you to include a key property in the data returned from onSuggestionsFetchRequested which would then be used as the key prop on the <Item /> component.
I tested my use case with this change and it fixes my issue. No more unexpected/recycled DOM elements being referenced.
npm run buildto see that you didn't break anything
Sorry, it is failing for me, but I don't know exactly what the problem is. Something with the prettier syntax?
> [email protected] prebuild /Users/rob/develop/deg-of-sep/react-autosuggest
> npm run prettier && npm run lint && npm test
> [email protected] prettier /Users/rob/develop/deg-of-sep/react-autosuggest
> prettier --single-quote --write
Usage: prettier [options] [file/glob ...]
By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.
Output options:
-l, --list-different Print the names of files that are different from Prettier's formatting.
--write Edit files in-place. (Beware!)
Format options:
--arrow-parens <avoid|always>
Include parentheses around a sole arrow function parameter.
Defaults to avoid.
--no-bracket-spacing Do not print spaces between brackets.
--jsx-bracket-same-line Put > on the last line instead of at a new line.
Defaults to false.
--parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|vue|yaml>
Which parser to use.
--print-width <int> The line length where Prettier will try wrap.
Defaults to 80.
--prose-wrap <always|never|preserve>
How to wrap prose.
Defaults to preserve.
--no-semi Do not print semicolons, except at the beginning of lines which may need them.
--single-quote Use single quotes instead of double quotes.
Defaults to false.
--tab-width <int> Number of spaces per indentation level.
Defaults to 2.
--trailing-comma <none|es5|all>
Print trailing commas wherever possible when multi-line.
Defaults to none.
--use-tabs Indent with tabs instead of spaces.
Defaults to false.
Config options:
--config <path> Path to a Prettier configuration file (.prettierrc, package.json, prettier.config.js).
--no-config Do not look for a configuration file.
--config-precedence <cli-override|file-override|prefer-file>
Define in which order config files and CLI options should be evaluated.
Defaults to cli-override.
--no-editorconfig Don't take .editorconfig into account when parsing configuration.
--find-config-path <path>
Find and print the path to a configuration file for the given input file.
--ignore-path <path> Path to a file with patterns describing files to ignore.
Defaults to .prettierignore.
--plugin <path> Add a plugin. Multiple plugins can be passed as separate `--plugin`s.
Defaults to [].
--plugin-search-dir <path>
Custom directory that contains prettier plugins in node_modules subdirectory.
Overrides default behavior when plugins are searched relatively to the location of Prettier.
Multiple values are accepted.
Defaults to [].
--with-node-modules Process files inside 'node_modules' directory.
Editor options:
--cursor-offset <int> Print (to stderr) where a cursor at the given position would move to after formatting.
This option cannot be used with --range-start and --range-end.
Defaults to -1.
--range-end <int> Format code ending at a given character offset (exclusive).
The range will extend forwards to the end of the selected statement.
This option cannot be used with --cursor-offset.
Defaults to Infinity.
--range-start <int> Format code starting at a given character offset.
The range will extend backwards to the start of the first line containing the selected statement.
This option cannot be used with --cursor-offset.
Defaults to 0.
Other options:
--no-color Do not colorize error messages.
--file-info <path> Extract the following info (as JSON) for a given file path. Reported fields:
* ignored (boolean) - true if file path is filtered by --ignore-path
* inferredParser (string | null) - name of parser inferred from file path
-h, --help <flag> Show CLI usage, or details about the given flag.
Example: --help write
--insert-pragma Insert @format pragma into file's first docblock comment.
Defaults to false.
--loglevel <silent|error|warn|log|debug>
What level of logs to report.
Defaults to log.
--require-pragma Require either '@prettier' or '@format' to be present in the file's first docblock comment
in order for it to be formatted.
Defaults to false.
--stdin Force reading input from stdin.
--stdin-filepath <path> Path to the file to pretend that stdin comes from.
--support-info Print support information as JSON.
-v, --version Print Prettier version.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prettier: `prettier --single-quote --write`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prettier script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/rob/.npm/_logs/2020-05-23T17_16_03_565Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prebuild: `npm run prettier && npm run lint && npm test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/rob/.npm/_logs/2020-05-23T17_16_03_584Z-debug.log