how to refresh part of a component in react.js

Question

import React,{useEffect} from 'react';
import CloudTables from '@cloudtables/react';
import { useState } from 'react';


function DataGridTable  ({ input1Value, input2Value }) 
{
  
    return (
    <div className="container mt-5">
     <section  >
          <div>
      <p>Received values:</p>
      <p>Input 1: {input1Value}</p>
      <p>Input 2: {input2Value}</p>
      <button variant="primary" onClick={() => {
         handleinput();
         refresh();
        }}>click!</button>
    </div>
      <CloudTables
      src={input1Value}
      apiKey={input2Value} ></CloudTables>
      </section>

    </div>
  );
}
export default DataGridTable

input1Value andr input2Value comes from another component and cloudtables doesnt refresh itself when they changed the other component is;

import React, { useState } from 'react';

function TokenText({ onButtonClick }) {
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');

  const handleButtonClick = () => {
    onButtonClick(input1, input2);
  };

  return (
    <div className="container mt-5">
        <section  >
      <input
        type="text"
        placeholder="Enter text for input 1"
        value={input1}
        onChange={(e) => setInput1(e.target.value)}
      />
      <input
        type="text"
        placeholder="Enter text for input 2"
        value={input2}
        onChange={(e) => setInput2(e.target.value)}
      />
      <div className="d-grid gap-2">
      <button  variant="primary" onClick={handleButtonClick}>Send to Another Component</button>
      </div>
      </section>
    </div>
  );
}

export default TokenText;

when they arrive i want the refresh the dataGridTable. how do i do it? refreshing whole page didnt work tho whish is: const refresh = () => window.location.reload(true)

Answer 1

From @cloudtables/react source code, it creates an instance on mount using src and apiKey, then never update it again.

You can

1. Only initiate the CloudTables when src and apiKey are confirmed

2. Or you can add key attribute to CloudTables so it will remount everytime those values are changed

   <CloudTables key={input1Value + input2Value} src={input1Value} apiKey={input2Value} />