CODEWITHSUNDEEP
javascriptreact-componentjslint
TCoder2231
TCoder2231

Reputation: 11

How to pass "parameter" to react component

I have a quick question, I am attempting to refactor my code in a existing codebase, this codebase uses a render function, however I would like to replace this with a react functional component instead.

However I am getting a error when I am passing in a parameter called "searchResults" which is a list.

Here is the previous non-refactored code

 searchResults.sort((a, b) => new Date(b[0].created) - new Date(a[0].created));

const Rows = [];

searchResults.forEach((appResults, i) => {
  Rows.push({
    cells: [
      appResults[0].applicationId,
      <>{renderSuccessCount(appResults)}</>,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  });

This is my refactored code

 const newRows = [];

searchResults.forEach((appResults, i) => {
  newRows.push({
    cells: [
      appResults[0].applicationId,
     <SuccessCount>{appResults}={appResults}</SuccessCount>,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  });

This is the function SuccessCount (in the non refactored code, renderSuccessCount was just renamed to SuccessCount in the refactored version

    const SuccessCount = (appResults: AppResult[]) => {
    const nSuccesses = appResults.filter((result: AppResult) => result.pulseStatus === SUCCESS).length;
    return Something;
  };

My question is relatively simple how do I pass appResults into my functional component, my current refactored code gives me this error

TS2740: Type '{ children: any[]; }' is missing the following properties from type 'AppResult[]': length, pop, push, concat, and 26 more.

This is in the linter, how do I get rid of it?

Upvotes: 1

Views: 10933

Answers (1)

vatz88
vatz88

Reputation: 2452

Now that SuccessCount is not a regular function but a react functional component, it'll not receive regular arguments. You'll have to access them via props

const SuccessCount = ({appResults}: {appResults: AppResult[]}) => {

Same as

const SuccessCount = (props) => {
const {appResults} = props; // or const appResults = props.appResults;
}

Usage as functional component

<SuccessCount appResults={appResults} />

Upvotes: 1

Related Questions