Prop not displayed in Input - Missing required prop: names

Good afternoon all,

I have created a route component called Message and a child component called Input. In my parent (Message) i have created an object called myNames. I have created a prop called names that has been passed down to Input(child) which takes names as an object. When i pass the prop inside input which is being used in message i keep getting a message saying Missing required prop: “names” in my input but i cannot understand why. I have attached some screenshots. Can anyone help. I cant see how the prop is missing when it has been passed down to Input. Trying to get a project finished any help fast would be much appreciated. Kind regards

just added the child again as it overlapped

Hi

It is better to post your code as text here in the forum. It easier to read on a mobile and people can cut and paste it to show a solution for example. You can put your code between two lines with three backticks. Like this:

```
<some-tag attr=“value”>
<some-other-tag />
```

and it will look like this:

<some-tag attr="value">
<some-other-tag />

One problem is that your component is called Input is that there already is a tag called input (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) so I think it will collide. A good of avoiding this is to always name your own components with at least two parts like phoneInput, userList etc which can be used in the template as phoneInput or phone-input

Hi johandalabacka,

Thanks for your response on this and will be mindful of adding code correctly next time. I will implement your suggestion and let you know how i get on if that is okay

Kind regards

1 Like