title: Split a component into smaller components react
body: <p>React tells us to divide the code as much as possible into components.
  I have all this code, I have a table and in it there is a button that opens a dialog to enter data and save them with the handleChange function but having all this together, is generating that the data entry is very slow.</p>
  
  <p>With the handleChange function, the OnChange event of the hooked form input style that sets the state of the object is handled.</p>
  
  <p>If I make a console.log the value shows me the full value that I enter but in the state I am missing the last character in this case on 9</p>
  
  <pre><code>alias 123 456 789
  State {"code":530,"email":"","alias":"123 456 78"}
  </code></pre>
  
  <p>What I want to achieve is to separate the table and the dialog into two different components</p>
  
  <p>How can I separate the table from the dialog?</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import MaterialTable from 'material-table';
  import {TextField,Button} from '@material-ui/core';
  import Dialog from "@material-ui/core/Dialog";
  import DialogActions from "@material-ui/core/DialogActions";
  import DialogContent from "@material-ui/core/DialogContent";
  import DialogContentText from "@material-ui/core/DialogContentText";
  import DialogTitle from "@material-ui/core/DialogTitle";
  import  axios  from 'axios';
  
  
  export default function dialog(props){ 
  
  
      const [open, setOpen] = useState(false);
  
      const handleClickOpen = () =&gt; {
        setOpen(true);
      };
  
      const handleClose = () =&gt; {
        setOpen(false);
      };
  
  const initialState={code:0, email:'', alias:''}
  
  const[subscription, setSubscription]=useState(initialState);
  
  const handleChange=(event)=&gt;{
      setSubscription({...subscription,[event.target.name]:event.target.value})
  }
  
  const handleSubmit=(event)=&gt;{
  
      event.preventDefault();
  
      if(!subscription.code || !subscription.email || !subscription.alias) 
          return
              const postSubscription=async()=&gt;{
                  try {
                      axios.post('/api/Subscription/add',subscription);
                      props.history.push('/Subscription'); 
                  }
                  catch (error) {
                      console.log('error', error);
                  }
              }
              postSubscription();
  } 
  
  
  const[user, setUser]= useState({Users:[]});
  
   useEffect(()=&gt;{
      const getUser=async()=&gt;{
              const response =await axios.get('/api/users');
              setUser(response.data);
              console.log(response.data)
      }
      getUser();
  },[]);
  
  return(
  &lt;div&gt;
              &lt;MaterialTable
              title="Users"
              columns={[
                    { title: 'Code', field: 'code' , type: 'numeric'},
                    { title: 'Name', field: 'name' },
                    { title: 'Lastname', field: 'lastname' },
                    { title: 'Age', field: 'age', type: 'numeric'},
              ]}
              data={user.Users}
              actions={[
                  {
                    icon: 'account_box',
                    tooltip: 'Add subscription',
                    onClick:()=&gt;{ handleClickOpen()}
                  }
                ]}
            /&gt;
                    &lt;Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title"&gt;
                    &lt;DialogTitle id="form-dialog-title"&gt;Subscription&gt;&lt;/DialogTitle&gt;
                        &lt;DialogContent&gt;
                            &lt;DialogContentText&gt;
                                Subscription
                            &lt;/DialogContentText&gt;
                                &lt;form onSubmit={handleSubmit} &gt;
                                    &lt;TextField
                                        id="filled-name"
                                        name="code"
                                        label="Code"
                                        value={subscription.code}
                                        onChange={handleChange}
                                        margin="normal"
                                        variant="outlined"
                                    /&gt;
                                    &lt;TextField
                                        id="filled-name"
                                        label="Email"
                                        value={subscription.email}
                                        name="email"
                                        onChange={handleChange}
                                        margin="normal"
                                        variant="outlined"
                                    /&gt;
                                    &lt;TextField
                                        id="filled-multiline-static"
                                        label="Alias"
                                        value={subscription.alias}
                                        name="alias"
                                        onChange={handleChange}
                                        margin="normal"
                                        variant="outlined"
                                    /&gt;
                                    &lt;Button
                                        variant="contained"
                                        color="primary"
                                        type="submit"&gt;
                                        Add
                                    &lt;/Button&gt;
                                &lt;/form&gt;
                        &lt;/DialogContent&gt;
                    &lt;DialogActions&gt;
                      &lt;Button onClick={handleClose} color="primary"&gt;
                        Cancel
                      &lt;/Button&gt;
                    &lt;/DialogActions&gt;
                  &lt;/Dialog&gt;
                &lt;/div&gt;
          );
          }
  </code></pre>