Sorry in advance if this question seems inappropriate. Just tell me, I'll explain everything.
So my question is I would like to move the function (code below) from jsx and wrap it in useCallback. Since at the moment a new function is created for each element on each render.
......
{suggestedTags.length ? (
<div className={classes.tagSuggestionWrapper}>
{suggestedTags.map((tag) => {
return (<div key={tag}
className={classes.tagSuggestion}
onClick={() => { selectTag(tag) }}>{tag}</div>
);
})}
</div>
) : null }
......
Whole code
export default function TagsInput(props) {
const {tags, setTags, tagSuggestions} = props;
const [input, setInput] = useState("");
const [suggestedTags, setSuggestedTags] = useState([]);
const [isValid, setIsValid] = useState(true);
const onChange = (e) => {};
const onSubmit = (e) => {};
const onKeyDown = (e) => {};
const deleteTag = (index) => {}
return (
<div className={classes.container}>
{tags.map((tag, index) => <div className={classes.tag} key={tag}>
{tag}
</div>
)}
<input
className={classes.input}
value={input}
placeholder={props.inputPlaceholder}
onKeyDown={onKeyDown}
onChange={onChange}
maxlength={3}
type="text"
minlength="3"
onSubmit={onSubmit}
/>
{suggestedTags.length ? (
<div className={classes.tagSuggestionWrapper}>
{suggestedTags.map((tag) => {
return (<div key={tag}
className={classes.tagSuggestion}
onClick={() => { selectTag(tag) }}>{tag}</div>
);
})}
</div>
) : null }
</div>
);
}
Via Active questions tagged javascript - Stack Overflow https://ift.tt/E6cCouG
Comments
Post a Comment