only show the paragraph if the collector data matches like an if...else or switch case-CodePudding

I am wanting to have the paragraph show the collectors.XXXX only if it matches in an if...else or switch case but having troubles on placement in the file to make this work. This currently just shows all paragraphs with all headers. I would like it to only show the first one if Collectors.Active = 1 and Collectors.FinanceCompany = 'Tandem' and the second paragraph based on the header options it has and so on.

I have tried adding the Condition1 as in place of my current and a function like below but this gives many issues.

function Condition1() {
   if (collector.active===1 && collector.financeCompany === 'Tandem') {
       return (<p>{Collectors.CollectorCode}{Collectors.FinanceCompany})
}

import React from 'react';
import axios from 'axios';

class AssignmentPreview extends React.Component {
  state = {
    Collectors: '',
    collectorList: []
  }

  componentDidMount() {
    this.getPreview()
  }

  getPreview = () => {
    axios.get('http://localhost:5000/assignmentPreview')
    .then((result) => result.data)
    .then((result) => {
      this.setState({collectorList: result});
    });
  };

  render() {
    return (
      <div className="previewWrapper">
        <h1>Assignment Preview</h1>
        {this.state.collectorList.map((Collectors) => (
        <div  key={Collectors.CollectorID}>
          
            <h2>1-30 days past due in Tandem – all credit types</h2>
              <p>{Collectors.CollectorCode}{Collectors.FinanceCompany}</p>

          <h2>1-45 days past due in Pawnee A credit</h2>
            <p>{Collectors.CollectorCode}{Collectors.FinanceCompany}</p>

          <h2>1-30 days past due in Pawnee B, C  & Startup </h2>
            <p>{Collectors.CollectorCode}{Collectors.FinanceCompany}</p>

          <h2>Tonia then assigns 31  Pawnee B, C & Startup and 46  Tandem & Pawnee A credit</h2>
            <p>{Collectors.CollectorCode}{Collectors.FinanceCompany}</p>

          <h2>Tandem fees – all credit types & all aging buckets</h2>
            <p>{Collectors.CollectorCode}{Collectors.FinanceCompany}</p>

          <h2>Pawnee fees – all credit types & all aging buckets</h2>
            <p>{Collectors.CollectorCode}{Collectors.FinanceCompany}</p>

        </div>
        ))}
      </div>
    );
  }
}

export default AssignmentPreview;

CodePudding user response：

You can use inline rendering for that: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator.

In your case it could be something like:

{collector.active===1 && collector.financeCompany === 'Tandem' && <p>{Collectors.CollectorCode}{Collectors.FinanceCompany}}

Hope it helps!