title: Add new property to state object from a form component with redux
body: <p>I have a form that adds new articles. I need to create another form that triggers when I click on a created article and add a property &quot;keyword&quot; to the article state and display it. I tried to do something but I am kinda stuck.</p>
  <p>Form.jsx component that adds the article/s:</p>
  <pre><code>import React, { useState } from 'react';
  import { useDispatch } from 'react-redux';
  import { v1 as uuidv1 } from 'uuid';
  
  import { ADD_ARTICLE } from '../constants/action-types';
  
  const Form = () =&gt; {
    const [title, setTitle] = useState('');
    const dispatch = useDispatch();
  
    const handleChange = (e) =&gt; {
      const { value } = e.target
      setTitle(value);
    }
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      const id = uuidv1();
      dispatch({ type: ADD_ARTICLE, payload: { id, title } });
      setTitle('');
    } 
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;div className='form-group'&gt;
          &lt;label htmlFor='title'&gt;Title&lt;/label&gt;
          &lt;input
            type='text'
            className='form-control'
            id='title'
            value={title}
            onChange={handleChange}
          /&gt;
        &lt;/div&gt;
        &lt;input className='btn btn-success btn-lg' type='submit' value='SAVE' /&gt;
      &lt;/form&gt;
    );
  }
  
  export default Form;
  </code></pre>
  <p>List.jsx component where the articles are displayed:</p>
  <pre><code>import React, { useState,useEffect } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import KeywordForm from './KeywordForm.jsx';
  
  import { fetchArticles } from '../thunk';
  
  const List = () =&gt; {
    const [showForm,setShowForm]=useState(false);
  
    const articles = useSelector(state =&gt; state.articles);
    const dispatch = useDispatch();
  
  
  
    const displayForm=()=&gt;{
     setShowForm(!showForm)
    }
  
    useEffect(() =&gt; {
      dispatch(fetchArticles);
    }, []);
  
    return (
      &lt;&gt;
      &lt;ul className='list-group list-group-flush'&gt;
        {articles.map(article =&gt; (
          &lt;li className='list-group-item' key={article.id} onClick={displayForm}&gt; 
            {article.title}  
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
      &lt;div&gt;
  
      {showForm &amp;&amp; (
          &lt;KeywordForm /&gt;
        )}
      &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default List;
  </code></pre>
  <p>Here i added a state that displays the KeywordForm component when I click an article.</p>
  <p>KeywordForm.jsx component,this is the one that I created to add the keyword:</p>
  <pre><code>import React, { useState } from 'react';
  import { useDispatch ,useSelector} from 'react-redux';
  import { ADD_KEYWORD } from '../constants/action-types';
  
  const KeywordForm = ({id,title}) =&gt; {
      
      const [keyword,setKeyword]=useState('');
      const articles = useSelector(state =&gt; state.articles);
      const dispatch=useDispatch();
  
      console.log(articles)
  
  
      const handleChange = (e) =&gt; {
          const { value } = e.target
          setKeyword(value);
        }
    
        const handleSubmit = (e) =&gt; {
          e.preventDefault();
          
          
          
        }  
  
      return (
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;div className='form-group'&gt;
            &lt;label htmlFor='keyword'&gt;Keyword&lt;/label&gt;
            &lt;input
              type='text'
              className='form-control'
              id='keyword'
              value={keyword}
              onChange={handleChange}
              
              
            /&gt;
          &lt;/div&gt;
          &lt;input className='btn btn-success btn-lg' type='submit' value='SAVE' /&gt;
        &lt;/form&gt;
      );
    }
    
    export default KeywordForm;
  </code></pre>
  <p>reducers.js</p>
  <pre><code>
  const initialState = {
    articles: []
  };
  
  const rootReducer = (state = initialState, action) =&gt; {
    const { type, payload } = action;
  
    switch(type) {
      case ADD_ARTICLE: {
        return {...state, 
          articles: [...state.articles,payload]
        };
      }
  
      case ADD_KEYWORD: {
        return Object.assign({}, state, {
          articles: state.articles.concat(payload)
        });
      }
  
      case ARTICLES_RETRIEVED: {
        return Object.assign({}, state, {
          articles: state.articles.concat(payload)
        });
      }
  
      default:
        return state;
    }
  }
  
  export default rootReducer;
  </code></pre>
  <p>actions.js</p>
  <pre><code>import { ADD_ARTICLE, ARTICLES_RETRIEVED,ADD_KEYWORD } from '../constants/action-types';
  
  const addArticle = (payload) =&gt; {
    return { type: ADD_ARTICLE, payload };
  }
  
  const addKeyword = (payload) =&gt; {
    return { type: ADD_KEYWORD, payload };
  }
  
  const articlesRetrieved = (payload) =&gt; {
    return { type: ARTICLES_RETRIEVED, payload };
  }
  
  export { addArticle, articlesRetrieved,addKeyword };
  </code></pre>
  <p>What should i add to my reducers/actions to make this work? My idea is that i have to somehow pass the id of the article clicked and then in the reducer find it's index or something and check it with the payload.id .</p>