To create a unique array of objects with JavaScript, we use the array filter method.
For instance, we write
const getUniqueBy = (arr, prop) => {
const set = new Set();
return arr.filter((o) => !set.has(o[prop]) && set.add(o[prop]));
};
to define the getUniqueBy function.
In it, we create a set with the Set constructor.
And then we return the array returned by filter that adds the o[prop] to the set if it doesn’t exist and if the property value doesn’t exist.
To get checkbox value in React.js, we can use a state.
For instance, we write
const Component = () => {
const [value, setvalue] = useState(false);
return (
<div className="form-check">
<input
className="form-check-input"
checked={value}
onChange={(e) => setValue(e.target.checked)}
type="checkbox"
/>
<label className="form-check-label">chechbox value</label>
{value}
</div>
);
};
to set the onChange prop of the checkbox input to a function that calls setValue with the checked value of the checkbox.
Then we get the checked value from the value state and set that as the checked prop’s value to update the checkbox with the latest checked value.
To create a new file with JavaScript, we use the File constructor.
For instance, we write
const f = new File([""], "filename");
to call File with an array with the file contents and a string with the filename respectively.
We can pass in a third argument with some options.
For example, we write
const f = new File([""], "filename.txt", {
type: "text/plain",
lastModified: date,
});
to call File with an object with the MIME type and the lastModified date of the file as the 3rd argument.
To fix the ‘ts2769: no overload matches this call.’ error with TypeScript, we should call a function with the arguments that matches one of the signatures of the function.
For instance, we write
function foo(str: "hello"): string;
function foo(str: "world"): string;
function foo(str: "hello" | "world"): string {
return str;
}
foo("hello");
to define the foo function with multiple signatures.
It accepts the str parameter which can be either 'hello' or 'world'.
And then we call foo with 'hello' to we avoid the error.
If we call foo with something other than 'hello' or 'world', then we get this error.
To fix ‘a component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.’ error with React, we should make sure the value prop of the input is always set to a value.
For instance, we write
<input value={inputValue} />
to add an input with the value prop set to the inputValue state or prop.
We should make sure inputValue is never null or undefined to avoid this error.