How to turn React Component able to receive variables

January 12, 2022

I am trying to create a React Component and pass a string variable when calling it right in the ReactDOM code.

tableInfoById.tsx

const TableInfoById: NextPage = (name: string) => {

    return (
        <div id="TableHolder" style={{marginTop: 30}} className={styles.grid} >
            <h1>Table {name}</h1>
        </div>
    )
}

export default TableInfoById

index.tsx

        <div className={styles.container}>
            <main className={styles.main}>
                <TableInfoById name={"test name"} />
            </main>
        </div>

I am receiving an error saying that the ```name: any``` type is not assignable to the type 'IntrinsicAttributes & { children?: ReactNode; }'.

Which is the right way to pass the name variable to the JSX component?

>Solution :

Add some curly braces and you should be good to go!

const TableInfoById: NextPage = ({ name }: { name: string }) => {
  return (
    <div id="TableHolder" style={{ marginTop: 30 }} className={styles.grid}>
      <h1>Table {name}</h1>
    </div>
  )
}

export default TableInfoById