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 | }

I think you would have got more responses if you had posted a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your attempt. Right now this is too much code to review and provide any help. — palaѕн, May 20 '20 at 11:54
The syntax `` does not match the type signature of `Output({ searched, productList })`. It looks like you want to pass in two props instead, which can be done in one of two ways: `` or `` should compile — Wex, May 26 '20 at 04:31
@MichaelHolborn, Could you please fork this https://codesandbox.io/s/nextjs-typescript-template-3re10 next js typescript codesandbox and input your code, which would be much better to understand your problem.. — Maniraj Murugan, May 26 '20 at 04:31

score 2 · Accepted Answer · answered May 26 '20 at 04:37

2

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}/>

answered May 26 '20 at 04:37

Shubham Khatri

270,417
55
406
400

Still have the same issue using this. My updated code includes this, but still breaks. – LeCoda May 28 '20 at 02:24
Did you change the interface, since it could be the reason you see this error – Shubham Khatri May 28 '20 at 03:49
Does it still not work? have you ensured that you have defined the interface correctly and not as a function – Shubham Khatri May 31 '20 at 15:45

score 1 · Answer 2 · answered May 20 '20 at 12:06

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.

Got an error just then, typescript is a little confusing for me, any idea on what i've done wrong? — LeCoda, May 20 '20 at 13:23
You're passing your data incorrectly. This isn't even a typescript problem, I recommend you study a bit more about JavaScript objects and how they are passed to react components — Badashi, May 20 '20 at 14:00
No problem. I have tried using this as an example, https://stackoverflow.com/questions/49081549/passing-object-as-props-to-jsx , yet come up against the same error. — LeCoda, May 20 '20 at 14:08

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

Update

after following other question i get this error.

2 Answers2