title: How to update input value on click of button from another page?
body: <p>In React project I've certain list of data populated in grid component. The grid has columns of varied data types like text, input field, link etc. In one such column an input field is mapped which has its respective default values.</p>
  <p>Now my intention is to change name of that particular input field of a particular record which navigates to another page which, has a button when clicked changes the name on the grid, but, the name of all records are changed. I need to change name of only that single record which is clicked and navigated based on its 'id'. Please refer to the code below.</p>
  <pre><code>const newCompData = [
      {
        id: 1,
        comp: &quot;McDonalds&quot;,
        feedback: &quot;Best Food Chain&quot;,
        name: &quot;Mike John&quot;,
        est: &quot;YYYY/MM&quot;,
        store: &quot;Burger Store&quot;
      },
      {
        id: 2,
        comp: &quot;KFC&quot;,
        feedback: &quot;Best Chicken Products&quot;,
        store: &quot;Chicken Food&quot;,
        name: &quot;Steve Williams&quot;,
        est: &quot;YYYY/MM&quot;
      },
      {
        id: 3,
        comp: &quot;Dominos&quot;,
        feedback: &quot;Best Pizza Store&quot;,
        store: &quot;Pizza Store&quot;,
        name: &quot;Mark Rays&quot;,
        est: &quot;YYYY/MM&quot;
      },
      {
        id: 4,
        comp: &quot;Star Bucks&quot;,
        feedback: &quot;Best Coffee Store&quot;,
        store: &quot;Coffee Store&quot;,
        name: &quot;Patrick Right&quot;,
        est: &quot;YYYY/MM&quot;
      },
      {
        id: 5,
        comp: &quot;Burger King&quot;,
        feedback: &quot;Best Burgers&quot;,
        store: &quot;Burger Store&quot;,
        name: &quot;Williams Wills&quot;,
        est: &quot;YYYY/MM&quot;
      },
      {
        id: 6,
        comp: &quot;Lays&quot;,
        feedback: &quot;Best Chips Factory&quot;,
        store: &quot;Chips Store&quot;,
        name: &quot;Sam Andrews&quot;,
        est: &quot;YYYY/MM&quot;
      }
    ];
  
    const [dataAll, setDataAll] = useState([]);
  
    useEffect(() =&gt; {
      const newData = newCompData?.map((data) =&gt; {
        return [
          { id: data.id },
          data.comp,
          data.store,
          data.name,
          data.est,
          data.feedback
        ];
      });
  
      setDataAll(newData);
    }, []);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Table newData={dataAll} /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>As seen above.... a list of records are mapped into the table component</p>
  <p>Here is the table component, where all the data is mapped</p>
  <pre><code>const Table = ({ newData }) =&gt; {
    useEffect(() =&gt; {
      setGridData({
        data: newData,
        page_info: {
          total_pages: 5,
          current_page: 1
        }
      });
    }, [newData]);
  
    let GridConfig = {};
  
    GridConfig = TableConfig;
  
    const [gridConfigData, setGridConfigData] = useState(GridConfig);
    const [gridData, setGridData] = useState(newData);
  
    return (
      &lt;&gt;
        &lt;Grid GridConfig={gridConfigData} GridData={gridData} /&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>Following is the Grid component in table format (only showing the required part)</p>
  <pre><code>const Grid = (props) =&gt; {
  
    let colConfig = props.GridConfig.column_config;
    let gridData = props.GridData?.data;
    const { newValue } = useContext(GlobalContext);
    const navigate = useNavigate();
  
  return (
  ....
  ....
  ....
                       {colConfig[cIndex].data_type === &quot;input_text&quot; &amp;&amp;
                            !colConfig[cIndex].cell_click_callback &amp;&amp; (
                              &lt;input
                                type=&quot;text&quot;
                                defaultValue={
                                  newValue != undefined ? newValue : colData
                                }
                              /&gt;
                            )}
  ....
  ....
  ....
  )
  }
  
  export default Grid
  </code></pre>
  <p>This is the page when clicked on record is navigated here.</p>
  <pre><code>const Test = () =&gt; {
    const location = useLocation();
    const navigate = useNavigate();
    const newId = location.state?.id;
  
    const { setNewValue } = useContext(GlobalContext);
  
    const handleClick = () =&gt; {
      navigate(&quot;/&quot;);
  
      // When clicked on this setValue shows the same value across all records
      setNewValue(&quot;John Spencer&quot;);
    };
  
    return (
      &lt;&gt;
        &lt;h2&gt;Test Page&lt;/h2&gt;
        &lt;p&gt;ID: {newId}&lt;/p&gt;
        &lt;button onClick={handleClick}&gt;Go Back&lt;/button&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>I want to show the value for input text which was clicked on Test page. Only specific record should be updated. What is the best solution to tackle this issue?</p>
  <p>Please refer to the Codesandbox link: <a href="https://codesandbox.io/s/elated-varahamihira-xpjtdb" rel="nofollow noreferrer">https://codesandbox.io/s/elated-varahamihira-xpjtdb</a></p>