I created a component for my form, it looks like this
import React from "react";
export default function TextArea(name, value, onChange) {
return (
<div className="mt-1">
<textarea
rows={3}
className="mt1 block w-full py-1.5 px-3 rounded-md border-2 border-orange-light"
placeholder="Digite"
value={value}
onChange={onChange}
name={name}
/>
</div>
);
}
But when I use it, it stays in an [object object], inside this textarea
I'm using it on my form this way
<TextArea
name="about"
value={about}
onChange={(e) => setAbout(e.target.value)} />
Can anyone tell what I should do to fix this? Thanks!
Here is the correct TextArea Component code, please try this and it will resolve your issue :)
import React from "react";
export default function TextArea({ name, value, onChange }) {
return (
<div className="mt-1">
<textarea
rows={3}
className="mt1 block w-full py-1.5 px-3 rounded-md border-2 border-orange-light"
placeholder="Digite"
value={value}
onChange={onChange}
name={name}
/>
</div>
);
}
First do console.log(value) and find out what is in object , later use it like below with whichever property name your object got.
value={value.propertyname}
What parameter do you pass to 'value'? Most likely, what is being passed to the 'value' is an object, check that first so I can help you better.
UPDATE
when declaring the about, maybe it's being declared so that it stays as an object. then declare as:
const [about, setAbout] = useState("");
<TextArea
...,
value={about},
...
>