title: setting state from a different component
body: <p>First of all, my approach could just be misguided from the start.</p>
  
  <p>I have a component that lists objects added by a sibling component.</p>
  
  <p>I would like the list component to update when a new object is added.</p>
  
  <p>As you can see, I'm calling the same function (getHostedServiceList) in both components. Obviously, this would need t be cleaned up, but I'd like to get it working first</p>
  
  <p>I'm using hooks to accomplish this.</p>
  
  <p>//input</p>
  
  <pre><code>const options = [
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' },
  ];
  
  // class Remotes extends Component {
  const Remotes = ({ ...props }) =&gt; {
    const [service, setService] = useState();
    const [url, setUrl] = useState();
    const [token, setToken] = useState();
    const [displayName, setDisplayName] = useState();
    const [apiUrl, setApiUrl] = useState();
    const [services, setServices] = useState();
  
    let HOME = process.env.HOME || '';
    if (process.platform === 'win32') {
      HOME = process.env.USERPROFILE || '';
    }
  
    const getHostedServiceList = () =&gt; {
      console.log('props', props);
      if (!fs.existsSync(`${HOME}/providers.json`)) {
        return newMessage(
          `Unable to locate ${HOME}/providers.json`,
          'error',
        );
      }
      const payload = JSON.parse(
        fs.readFileSync(`${HOME}/providers.json`),
      );
  
      setServices(payload);
    };
  
    const setProvider = selectedOption =&gt; {
      setService(selectedOption.value);
      setUrl(`http://www.${selectedOption.value}.com`);
      setApiUrl(`http://www.${selectedOption.value}.com/api/v1`);
    };
  
    const { onAddRemote } = props;
    return (
      &lt;div&gt;
        &lt;div&gt;Add a remote host:&lt;/div&gt;
        &lt;StyledSelect
          value="Select Provider"
          onChange={setProvider}
          options={options}
        /&gt;
        {console.log('service', service)}
        &lt;TextInput
          label="Url"
          defaultValue={url}
          onChange={e =&gt; {
            setProvider(e.target.value);
          }}
          disabled={!service ? 'disabled' : ''}
        /&gt;
  
        &lt;TextInput
          label="API Url"
          defaultValue={apiUrl}
          onChange={e =&gt; setApiUrl(e.target.value)}
          disabled={!service ? 'disabled' : ''}
        /&gt;
  
        &lt;TextInput
          label="Token"
          onChange={e =&gt; setToken(e.target.value)}
          disabled={!service ? 'disabled' : ''}
        /&gt;
  
        &lt;TextInput
          label="Display Name"
          onChange={e =&gt; setDisplayName(e.target.value)}
          disabled={!service ? 'disabled' : ''}
        /&gt;
  
        &lt;Button
          disabled={!service || !url || !token}
          onClick={() =&gt; {
            onAddRemote({ service, url, apiUrl, token, displayName });
            getHostedServiceList();
          }}
        &gt;
          Add Remote
        &lt;/Button&gt;
      &lt;/div&gt;
    );
  };
  
  </code></pre>
  
  <p>//list</p>
  
  <pre><code>
  const HostedProviderList = ({ ...props }) =&gt; {
    const [services, setServices] = useState();
  
    let HOME = process.env.HOME || '';
    if (process.platform === 'win32') {
      HOME = process.env.USERPROFILE || '';
    }
  
    const getHostedServiceList = () =&gt; {
      console.log('props', props);
      if (!fs.existsSync(`${HOME}/providers.json`)) {
        return newMessage(
          `Unable to locate ${HOME}/providers.json`,
          'error',
        );
      }
      const payload = JSON.parse(
        fs.readFileSync(`${HOME}/providers.json`),
      );
  
      setServices(payload);
    };
  
    useEffect(() =&gt; {
      // console.log('props 1', services);
      getHostedServiceList();
    }, []);
  
    return (
      &lt;Wrapper&gt;
        &lt;Flexbox&gt;
          &lt;Title&gt;Provider List&lt;/Title&gt;
        &lt;/Flexbox&gt;
        &lt;div&gt;
          {services &amp;&amp;
            services.map((service, i) =&gt; (
              &lt;Service key={i}&gt;
                &lt;ServiceName&gt;{service.displayName}&lt;/ServiceName&gt;
                &lt;ServiceProvider&gt;{service.service}&lt;/ServiceProvider&gt;
              &lt;/Service&gt;
            ))}
        &lt;/div&gt;
      &lt;/Wrapper&gt;
    );
  };
  </code></pre>
  
  <p>I would like the list component to update when a new object is added.</p>