I am trying to get input from an input filed and store it into a variable but it is giving me an error following,
Error: Objects are not valid as a React child (found: object with keys {input}). If you meant to render a collection of children, use an array instead.
the video tutorial I am following written the same code. I have written the same code but I can't understand why my code is not running, I am a very new to react so I don't know what to do
function Feed() {
const [input, setInput] = useState('');
const [posts, setPosts] = useState([]);
useEffect(() => {
db.collection('posts').onSnapshot((snapshot) =>
setPosts(
snapshot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}))
)
);
}, []);
const sendPost = (e) => {
e.preventDefault();
db.collection('posts').add({
name: 'Sumit Sarkar',
description: 'This is a test',
message: input,
photoUrl: '',
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
};
return (
<div className='feed'>
<div className='feed__inputContainer'>
<div className='feed__input'>
<CreateIcon />
<form action=''>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
type='text'
/>
<button onClick={sendPost} type='submit'>
Send
</button>
</form>
</div>
<div className='feed__inputOptions'>
<InputOption Icon={ImageIcon} title='Photo' color='#70B5F9' />
<InputOption Icon={SubscriptionsIcon} title='Video' color='#E7A33E' />
<InputOption Icon={EventNoteIcon} title='Event' color='#C0CBCD' />
<InputOption
Icon={CalendarViewDayIcon}
title='Write Article'
color='#7FC15E'
/>
</div>
</div>
{posts.map(({ id, data: { name, description, message, photoUrl } }) => (
<Post
key={id}
name={name}
description={description}
message={message}
photoUrl={photoUrl}
/>
))}
<Post
name='Sumit Sarkar'
message='WOW! this works'
description='This is a test'
/>
</div>
);
}
export default Feed;