Properties missing when working with multiple components

I have these interfaces:

export interface DocRow {
  docName: string;
  docDate: string;
  docUrl: string;
  packId: string;
}

interface Props {
  docRow: DocRow[];
  packTitle: string;
  policy: string;
}

My code also has this render method:

render() {
  return this.props.docRow.map(docRow => {
    const {packTitle} = this.props;      
    const docDateFormatted = moment(docRow.docDate, 'DDMMYYYY').format('Do MMMM YYYY');      
    if (docRow.docName === 'Cert' && !this.consentGiven(this.props.policy, docRow.docUrl)) {
          return (
              <tr key={docRow.docUrl} className="document-row-disabled document-disabled">
              <td><IssueButton policy={this.props.policy} dRow={docRow} /></td>
              <td className="document-cell document-cell--name">{docRow.docName}</td>
              <td className="document-cell document-cell--data">
                  <span>{docDateFormatted}</span>
                  <span className="PDF-text">PDF</span>
              </td>
              </tr>
          );
    }
});

My IssueButton currently looks like this(work in progress):

interface Props {  
  dRow: DocRow[];
  policy: string;
}

interface State {
   disableIssueButton: boolean;
   showIssueCertPrompt: boolean;
}

export class IssueButton extends React.Component<Props, State> {
    IssueCertService: IssueCertService;

    constructor(props: Props) {
      super(props);
      this.issueCertService = new IssueCertService();
      this.state = {
        disableIssueButton: false,
        showIssueCertPrompt: false
      };
    }

    render() {                
        if (this.props.dRow.docName === 'Cert') {
        
            return (
                <Button
                    primary={true}
                    fullWidth={false}
                    disabled={this.state.disableIssueButton}
                >
                    Issue cert
                </Button>
            );
        } else {
            return;                
        }
    }
}

In line <td><IssueButton policy={this.props.policy} dRow={docRow} /></td> dRow has this error:

Type ‘DocRow’ is missing the following properties from type ‘DocRow[]’: length, pop, push, concat, and 26 more.ts(2740) IssueButton.tsx(9, 3): The expected type comes from property ‘dRow’ which is declared here on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ …; }>’

and in line if (this.props.dRow.docName === 'Certificate and Disc') { of IssueButton I have this:

Property ‘docName’ does not exist on type ‘DocRow[]’.ts(2339)

I suspect I need to do some sort of a map in my IssueButton but I also thought return this.props.docRow.map(docRow => { should single out wach DocRow element. How do I resolve this?

Answer

Change dRow={[docRow]} to dRow={docRow} and

render() {                
    if (this.props.dRow.docName === 'Cert') {
     
        return (
            <Button
                primary={true}
                fullWidth={false}
                disabled={this.state.disableIssueButton}
            >
                Issue cert
            </Button>
        );
    } else {
        return;                
    }
}

render() {
    return this.props.dRow.map(dRow => {            
        if (dRow.docName === 'Cert') {
        
            return (
                <Button
                    primary={true}
                    fullWidth={false}
                    disabled={this.state.disableIssueButton}
                >
                    Issue cert
                </Button>
            );
        } else {
            return;                
        }
    }
}

Advertisement

Answer