Sniberb•2y ago

🎃 Spookyberb 🎃 – 12-59 Nov 3

Having a function at the parent level, is it possible to pass from the child a value parameter to the function while also passing another parameter from the parent? I want to pass a limit param from the parent, and a value param from the child

const isValid = (value, limit = 25) => value.length <= limit;

<ControlledInput validationFunction={isValid} />
const ControlledInput = ({ control, name, label, validationFunction }) => (
  <Controller
  ...
        onValueChange={(val) => {
          if (validationFunction(val)) {
            onChange(val);
          }
        }}
  ...
  />
);

const isValid = (value, limit = 25) => value.length <= limit;

<ControlledInput validationFunction={isValid} />
const ControlledInput = ({ control, name, label, validationFunction }) => (
  <Controller
  ...
        onValueChange={(val) => {
          if (validationFunction(val)) {
            onChange(val);
          }
        }}
  ...
  />
);

4 Replies

Louis•2y ago

Yeah, you can change <ControlledInput validationFunction={isValid} /> to

<ControlledInput validationFunction={(value) => isValid(value, limit)} />

<ControlledInput validationFunction={(value) => isValid(value, limit)} />

Assuming limit is available in scope from the parent there meowthumbsup

Sniberb•2y ago

damn how does that work? oooo okay thank you!

Louis•2y ago

It’s just a callback function so you can receive the value from the child and call isValid with it and whatever is in scope in the parent No worries meowthumbsup

reactibot•2y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1037712604535210065