Question 206786 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Destructured parameters causing eslint // {age, name} is missing in props

i am using javascript
destructuring like this will pick properties from the incoming argument object

export default function App() {
    const data={name:"name",age:"age"}

    return(
        <>
           <SHow data={data}/>
        </>
)}

////eslint error 'age' is missing in props validationeslintreact/prop-types (parameter) age: any

function SHow({name,age}) {**/////eslint error 'age' and  'age' is missing in props**

    return(
        <>
            <h1>{name}</h1>
            <h1>{age}</h1>
        </>
)}

the code is working properly
so why es lint showing /////eslint error ‘age’ and ‘age’ is missing in props

i tryed this but i don’t want create new variable for each component

function SHow(prop) {
    **const {name,age} =prop**
    return(
        <>
            <h1>{name}</h1>
            <h1>{age}</h1>
        </>
)}
Tags:

2

Answers


  1. 0

    The issue is you’re only passing a single prop named data with the original.

    Try either spreading the props

    <SHow {...data} />

    which is the equivalent of

    <SHow name={name} age={age} />

    or destructuring the data prop

    function SHow({ data: { name, age } }) {
  // ...
}
    Login or Signup to reply.
  2. 0

    The prop you are passing is data. Try this :

    export default function App() {
const data={name:"name",age:"age"}

return(
    <>
       <SHow data={data}/>
    </>
)}

function SHow({data}) {

return(
    <>
        <h1>{data.name}</h1>
        <h1>{data.age}</h1>
    </>
)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search