score:1
you could do this a couple of ways, but here is a simple solution. the important part here is to ensure you set your input to a controlled input, where you provide the value from react.
we need a function which will implement your logic. it should take in a string and the total number of commas you want, and limit that string to the comma amount.
below is a very simple function that does this. it splits the string using commas, ensures the result array stays at 10 length, and returns a joined string from the resultant array.
function ensurecommas(str, commas = 10) {
const commaarray = str.split(',');
const reduced = commaarray.slice(0, commas);
return reduced.join(',');
}
now to use it. here is a very simple app component which keeps the input value in state and provides this state value to the input, and has an onchange event handler which calls the above function on every key press
import { usestate } from "react";
import "./styles.css";
function ensurecommas(str, commas = 10) {
const commaarray = str.split(",");
return commaarray.slice(0, 10);
}
export default function app() {
const [value, setvalue] = usestate("");
const oninputchange = (e) => {
const inputval = e.target.value;
const newinputval= ensurecommas(inputval , 10);
setvalue(newinputval);
};
return (
<div classname="app">
<input value={value} onchange={oninputchange}></input>
</div>
);
}
score:0
remove the handlekeypress
function from the input props and update the relationcallbackfunction
object.
const relationcallbackfunction = {
handleonchangeinput: (e) => {
let value = e.target.value;
const currentstr = value.split(",");
if (currentstr.length <= 10) {
setrelationsearch(value);
}
}
};
Source: stackoverflow.com
Related Query
- How can I limit the input tag to only 10 Commas?
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- How Can I create a select input tag using Buttons and store the selected one in state
- How i can limit the items in the FlatList and add load more?
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- how can i write regex for accepting only numbers for antd input
- React: how to make an input only as wide as the amount of text provided?
- How do I fix the position of an input so it's always below an element that's centered on the screen but its size can change?
- How Can i limit the maximum number of options that can be selected in a Material UI lab Autocomplete component
- React: How can I call a method only once in the lifecycle of a component, as soon as data.loading is false
- In React, how can I traverse the entire render tree, not only "children"
- How can I open the mui KeyboardDatePicker dialog when the input field is clicked
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- How can I make the selected file type acceptable only as docx, using FilePond?
- How can I make a fluid text input using react, which resizes based on the content?
- How to limit the input number to max of two decimals with Ant Design?
- How can I update only part of the state
- How can I pass the argument up to the onClick function when it is called by reference inside return tag in reactjs?
- How can I make a Tailwind column full-width when it is the only column in a row
- How can I load Google Tag Manager to a next.js app, AFTER the app is fully loaded?
- How can I dynamically change the baseURL of my RTK Query api only for a specific group of injected endpoints?
- I want to change variant or background of the clicked button (onClick) only in reactjs. How can i achieve it?
- How do I restrict the input to only number at the input box?
- How to show a certain value inside the input tag in reactjs?
- How can i bold the word before colon only if colon exists in line by regular expression
- How can i only re-render the new child component when mapping an array from Redux state?
- How to fix 'Hooks can only be called inside the body of a function component' error in React custom hook?
- How Can I use the returned string (new feature of React v16.0.0) in the source tag of an image ex: <img src='returnedString' />?
- Invalid hook call. Hooks can only be called inside... how to fix this maintaining the react class component
More Query from same tag
- Focus the last element of a map html rendering
- React js, Cannot read property "0". When calling an API
- Changing components based on url with react router
- How to correctly display an array with objects (from another file) on react page?
- How to remove duplicates then map values in React
- can't setState in request.post method
- Chart.js how to highlight a part of a label
- Redux - returning an array instead of an object in the reducer
- TypeError: Cannot read property 'type' of undefined Error before any Components even render
- I can't Change text in the form in React
- How to deploy React (with solidity smart contracts) to S3 without error
- Redux toolkit axios api is not getting called
- Find unique values from an array in React/js
- how to define base URL in the dev server for react-scripts start call
- How to open dynamic modal with react js
- Automatically change which element of array to display in React
- How to make a generic 'filter' Higher-Order Component in React.js?
- Cannot read property 'contextTypes' of undefined Unit Testing enzyme
- React / CSS - float nav bar right with flex boxes?
- Updating useState with server response JSON object
- How to allow certain combinations of props in React Typescript?
- Full Screen mode detection in 150% zoom is not working
- React 16 Component Size Attribute (size="test") get removed
- how to edit/update initialState in slice redux
- The term 'CI=false' is not recognized as the name of a cmdlet, function, script file, or operable program
- How can I make each student add their own identifier tags?
- GraphQL, React, Apollo - Expected Iterable, but did not find one for field "..."
- How to configre Create React Apps default Service Worker to cache assets that are not in react src Context (public Folder)?
- If proptype of element what is the default?
- React Server Side Rendering with expensive initial API call