How to submit data in todo using react hooks

Question

I want to refactor my todo app using React hooks, Once the user enters a title and message, they are saved in an array.

const Messages = () => {
 
   const [messages, saveMessages] = useState([
       {
           title: 'Dan',
           message: 'Hola !'
       }
   ]);

 const [post, setPost] = useState('')
 const [title, setTitle] = useState('')
 
 
const handleSubmit = () => { 
    saveMessages([...messages, post, title])
}

        return (
            <Col lg={9} md={9} sm={12} style={{border: '1px solid grey', paddingTop: '20px'}}>
            <div style={{display: 'flex', justifyContent: 'start', alignItems: 'center'}}>
                <input value={title} onChange={ (e) => setTitle(e.target.value)} className='mr-3 textField' placeholder='your title ...' style={{padding: '5px 5px',  borderRadius: '50px', width: '60%', boxShadow: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1)'}}/>
                <textarea value={post} onChange={ (e) => setPost(e.target.value)} className='mr-3 textField' placeholder='your message ...' style={{padding: '5px 20px',  borderRadius: '50px', width: '60%', boxShadow: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1)'}}/>
                <Button variant="contained" color="primary" onClick={handleSubmit}>
                    Add post
                </Button>
             
            </div>
            <div>
                {/* <Post message={this.state.message} /> */}
                <Post title='Ksena' image='https://i.pinimg.com/originals/cb/7c/6a/cb7c6afd13741ce6a58c1584d8b59097.jpg' message='Hello there !'/>
                <Post title='Josh' image='https://www.pauldavidsmith.co.uk/wp-content/uploads/2019/08/corporate-portraits-peterborough-48-705x529.jpg' message='Welcome !'/>
                {messages.map(i => {
                    return (
                        <Post title={i.title} message={i.message}/>
                    )
                   
                })}
            </div>
            </Col>
        )
  
}

But its only rendering the images after submition (click on 'add post' button) I wonder if I should create 2 hooks/array for saving message and title?

Update you code to saveMessages([...messages, { message: post, title }]) inside handleSubmit — kimobrian254
– kimobrian254, Commented Oct 19, 2020 at 13:43
In order to correctly update your state values you have to use the correct methods declared when you create them, const [post, setPost] = useState(''); So in order to successfully update say post you have to use setPost('...') and so on — Ricardo Sanchez
– Ricardo Sanchez, Commented Oct 19, 2020 at 13:55

Alexandr · Accepted Answer · 2021-12-26 19:28:48Z

2

const handleSubmit = useCallback(() => { 
  saveMessages([
    ...messages,
    {
      message: post,
      title: title,
    },
  ]);
}, [messages, post, title]);

Update

Even more correctly to pass the update function into your saveMessages method:

const handleSubmit = useCallback(() => { 
  saveMessages((prevMessages) => [
    ...prevMessages,
    {
      message: post,
      title: title,
    },
  ]);
}, [post, title]);

edited Dec 26, 2021 at 19:28

answered Oct 19, 2020 at 13:56

Alexandr

5222 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to submit data in todo using react hooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related