Conditional Rendering in React won't work, state not working properly?

Question

i'm trying to have a component only render when I have used a search button.

The code below is my current code

Update

Made the changes, Now receiving this error.

error ] ERROR in /home/holborn/Documents/Work/Portfolio/Data_Scraping/Eldritch/client/pages/index.tsx(21,19): 21:19 Cannot find name 'Product'. 19 | interface OutputProps { 20 | searched?: string

21 | productList?: Product[] | ^ 22 | } 23 | 24 | const Output: React.FC = ({ searched, productList }) => {

This is the array for product list when the search is made

after following other question i get this error.

JSX element type 'void' is not a constructor function for JSX elements.
    262 | 
    263 |   return (
  > 264 |     <Output columns={columns} message={message} handleSearch={handleSearch} searchRef={searchRef} productList={productList}/>
        |     ^
    265 | 
    266 |   );
    267 | }

Answer 1

You expect the output component to have productList and searched as props however you pass it data as a prop

Secondly you must define the interface directly and not as a function

 interface OutputProps {
    searched?: string
    productList?: Product[]
}

...


<Output searched={searched} productList={productList}/>

Answer 2

Breaking down your code:

function Output(searched,productList) {
  if (!searched && !productList) {
    return null;
  }

  return (
    <div>
    <div>
            <p></p>

            {/* <Chart data={productList} /> */}
          </div>
          <table className="table-auto">
            <thead>
              <tr>
                <th className="px-4 py-2">Name</th>
                <th className="px-4 py-2">Price</th>
                <th className="px-4 py-2">Brand</th>
              </tr>
            </thead>
            <tbody>
              {productList.map((e, index) => (
                <tr key={index}>
                  <td className="border px-4 py-2">{e.Product}</td>
                  <td className="border px-4 py-2">{e.Price}</td>
                  <td className="border px-4 py-2">{e.Brand}</td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
  );
}

            <Output data = {etc}/>

However, this is invalid. when you call a component through JSX(ie. <Output/>), React will excpect that Output is called with a single props argument, not multiple arguments. (besides, your etc is undefined here)

so you might have meant to do this:

// place your parameters inside an object, commonly referred to as "props"
function Output({ searched, productList }) {

And, since you're using Typescript, you can leverage the type system to work for you:

interface OutputProps {
    searched?: string
    productList?: Product[]
}

const Output: React.FC<OutputProps> = ({ searched, productList }) => {
  // Typescript infers searched and productList typing here
  if(!searched && !productList) {
    return null;
  }
  ...
}

and while we're at it, please format your code. Look into Prettier to make sure your code stays consistent and easy to read.