解构对象数组并检查对象道具以呈现组件

Question

Im trying to do a very simple function to check for a prop in an array of objects and return a Component depending on if the prop has a value "phone" but Im struggling for not understanding how to deconstruct my arrays of objects. My array of objects looks like this:

 {format: "text", multivalue: false, metaInformation: Array(2), optional: false, deprecated: false, …}
 {format: "text", multivalue: false, metaInformation: Array(1), optional: true, deprecated: false, …}
 {format: "phone", multivalue: false, metaInformation: Array(1), optional: false, deprecated: false, …}
 {format: "phone", multivalue: false, metaInformation: Array(2), optional: true, deprecated: false, …}
 {format: "textarea", multivalue: false, metaInformation: Array(2), optional: true, deprecated: false, …}
 {format: "boolean", multivalue: false, metaInformation: Array(2), optional: true, deprecated: false, …}

First I have my element to return (that is going to replace one component element with another, depending on the format:

const LabeledInput = ({Component, label, name, mandatory, valid, 
...rest}) => {
  return (
    <div className="label-input mb-2 form-group">
      <Label htmlFor={name} mandatory={mandatory}>
        {label}
      </Label>
      <Component name={name} mandatory={mandatory} valid={valid} 
 {...rest} /> <----*** this is the component that replace elements
      <div className="invalid-feedback">
         <FormattedMessage id="header.settings.profile.invalid.feedback" />
      </div>
    </div>
  );
};

im trying to get the "format" prop from my array of objects to render this special componenet in case the format is "phone". So I made my "PhoneNumberInput" component:

const PhoneNumberInput = ({value, onChange, valid,  ...rest}) => {
return (
    <Input
      className={classNames('form-control ', {
        'is-invalid': !valid,
      })}
      type='tel'
      value={value}
      onChange={onChange}
      valid={valid}
      placeholder={'phone'}
      {...rest}
    />
)
}

and then I have a very similar without type='tel' for all the others formats. Then, inside my render() I declared my function that is going to check for the prop "format" in the object and return the desired Component... like this:

const {customFields} = this.props;
const {format: format} = customFields || {};

const lookupComponent = (format) => {
  console.log('the format is this: ====>', customFields)

  if (format === 'phone') {
    console.log('there are some')
    return <PhoneNumberInput key={format}/>
  } else {
    return <Input key={format}/>;
  }
}

customFields is my array with objects and at the end I have my component that returns the inputs

return (
          <LabeledInput
            Component={lookupComponent} <---- I run my function 
            here
            name={cf.id}
            key={index}
            mandatory={!cf.optional}
            valid={this.customValid(cf.id)}
            label={metaHash.get('label')}
            value={this.state.customFields[cf.id]}
            onChange={e => this.customChange(e, cf.id)}
          />
        );

The problem is that is NOT checking for the propery format in my array of objects "customFields", I tried mapping them and got something kind of working but not really... cause it itinerated all the inputs in every element. (I tried this:)

const lookupComponent = customFields.map((data) => {
  console.log('the format is this: ====>', data.format) <--** In this case I've got the formats but itinerated for all the objects in the Array.

  if (data.format === 'phone') {
    console.log('there are some')
    return <PhoneNumberInput key={format}/>
  } else {
    return <Input key={format}/>;
  }
})

So how do I get the "format" prop from the object and check if there is one format === phone , render the telephone input else a normal input? Thanks in advance for any advise! Cheers!

Answer 1

I realized that I was already maping the objects in the right place, so once i maped them on the component that render the function to check the props all started to work! so, the changes went like this, On my function to check the format I passed the already maped objects:

const lookupComponent = cf => {
  if (cf.format === 'phone') {
    return PhoneNumberInput;
  } else {
    return Input;
  }
};

And that "cf" comes from my now right maped objects:

 {customFields.map((cf, index) => {
        const metaHash = cf.metaInformation.reduce((map, mi) => map.set(mi.name, mi.value), new Map());
        return (
          <LabeledInput
            Component={lookupComponent(cf)}
            name={cf.id}
            key={index}....

So i didnt need to deconstruct anything actually (or well not a second time at least!)