title: How to pass value in preview before sending in ReactJs
body: <p>I trying to create preview template by using useState. I create multiple button action and it's work fine. Now I trying to pass value of every input to other function and then send data to server.
  How to pass value of every inputs to last step of button?
  Thanks.
  This is my code and I try more and more but give nothing:</p>
  <pre><code>     const ShowOrNot = () =&gt; {
      const [showForm, setShowForm] = useState(false);
      const [showPreview, setShowPreview] = useState(false);
      const [formHidden, setFormHidden] = useState(false);
      return (
          &lt;div className=&quot;col-12&quot;&gt;
              {!showForm ? (
                  &lt;ShowFormButton onClick={() =&gt; setShowForm(true)}/&gt;
              ) : undefined}
  
              {showForm ? (
                  &lt;div className={''} id=&quot;scrollbar-style&quot;&gt;
                      &lt;div&gt;
                          &lt;HideFormButton
                              onClick={() =&gt; {
                                  setShowForm(false);
                              }}
                          /&gt;
                      &lt;/div&gt;
                      {!formHidden ? &lt;MyForm/&gt; : undefined}
  
                      {!showPreview ? (
                          &lt;ShowPreviewButton
                              onClick={() =&gt; {
                                  setShowPreview(true);
                                  setFormHidden(true);
                              }}
                          /&gt;
                      ) : undefined}
                      {showPreview ? (
                          &lt;div className={&quot;preview-send-wrapper&quot;}&gt;
                              &lt;div className={&quot;preview-send-header&quot;}&gt;
                                  &lt;div className={&quot;preview-send-header-icon&quot;}&gt;
                                    
                                  &lt;/div&gt;
                                  &lt;h2&gt;
                                      Preview
                                  &lt;/h2&gt;
                              &lt;/div&gt;
                              &lt;div className={&quot;mt-5 preview-send-cover&quot;}&gt;
                                  &lt;img src={value of inputs} alt={&quot;cover&quot;}/&gt;
                              &lt;/div&gt;
                              &lt;div className={&quot; preview-send-video-poster&quot;}&gt;
                                  &lt;img src={value of inputs} alt={&quot;cover&quot;}/&gt;
                                  &lt;h1 className={&quot;mt-4&quot;}&gt;
                                      {value of input} // one value of inputs get here
                                      &lt;span&gt;{two value of inputs get here}&lt;/span&gt;
                                  &lt;/h1&gt;
                                  &lt;h4 className={&quot;mt-3&quot;}&gt;
                                     {value of inputs} 
                                  &lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div className={&quot;preview-send-summary-video&quot;}&gt;
                                  &lt;p&gt;
                                      {value of inputs}
                                  &lt;/p&gt;
                              &lt;/div&gt;
                              &lt;Row&gt;
                                  &lt;div className={&quot;col-lg-8 col-12&quot;}&gt;
                                      &lt;button className={&quot;send-video-btn-final&quot;}&gt;
                                          Send
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                                  &lt;div className={&quot;col-lg-4 col-12&quot;}&gt;
                                      &lt;SendButton
                                          onClick={() =&gt; {
                                              setFormHidden(false);
                                              setShowPreview(false);
                                              setShowForm(true);
                                          }}
                                      /&gt;
                                  &lt;/div&gt;
                              &lt;/Row&gt;
                          &lt;/div&gt;
                      ) : undefined}
                  &lt;/div&gt;
              ) : undefined}
          &lt;/div&gt;
      );
  };
  
  function SendButton({onClick}) {
      return (
          &lt;div&gt;
              &lt;button className=&quot;edit-send-video-btn w-100&quot; onClick={onClick}&gt;
                  Edit
              &lt;/button&gt;
          &lt;/div&gt;
      );
  }
  
  function ShowFormButton({onClick}) {
      return (
          &lt;div&gt;
              &lt;button className=&quot;upload-content-btn w-100&quot; onClick={onClick}&gt;
                  &lt;span className=&quot;ml-2&quot;&gt;
                         
                  &lt;/span&gt;new upload{' '}
              &lt;/button&gt;
          &lt;/div&gt;
      );
  }
  
  function ShowPreviewButton({onClick}) {
      return (
          &lt;div className={&quot;row show-preview-button&quot;}&gt;
              &lt;div className=&quot;col-lg-8 col mt-3&quot;&gt;
                  &lt;button className=&quot;preview-send-data-btn&quot; onClick={onClick}&gt;
                      Preview
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div className=&quot;col-lg-4 col mt-3&quot;&gt;
                  &lt;button className=&quot;draft-send-data-btn&quot;&gt;Draft&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  function HideFormButton({onClick}) {
      return (
          &lt;div className={'content-send-form-close-btn'}&gt;
              &lt;button onClick={onClick} className={'close-modal-btn'}&gt;
                  &lt;span&gt;Close&lt;/span&gt;
                 
              &lt;/button&gt;
          &lt;/div&gt;
      );
  }
  
  class MyForm extends Component {
      constructor(props) {
          super(props);
          this.state = {
  
                  videoTitle: &quot;&quot;,
                  category: &quot;&quot;,
                  summary: &quot;&quot;,
                  videoText: &quot;&quot;,
  
          }
      }
  
      onChange = (e) =&gt; {
          this.setState({
              [e.target.name]: e.target.value,
          });
      };
  
      render() {
          return (
              &lt;div className={&quot;content-send-form-wrapper&quot;}&gt;
                  &lt;div className={'content-send-form-header'}&gt;
                      &lt;div className={'content-send-form-header-title'}&gt;
                          
                      &lt;/div&gt;
                    
  
                  &lt;/div&gt;
                  &lt;form className={'mt-3 content-send-form-data register-teacher-inputs-box '}&gt;
                      &lt;Row&gt;
                          &lt;div className={'col-lg-6 col-12 mt-4'}&gt;
                              &lt;label htmlFor={'name'} className={' text-right'}&gt;
                                  &lt;span&gt;*&lt;/span&gt;
                              &lt;/label&gt;
                              &lt;input
                                  type=&quot;text&quot;
                                  className=&quot;form-control&quot;
                                  placeholder={'Title'}
                                  name={'videoTitle'}
                                  required=&quot;true&quot;
                                  value={this.state.videoTitle}
                                  onChange={this.onChange}
                                  onBlur={(e) =&gt; (e.target.placeholder = 'Title')}
                                  onFocus={(e) =&gt; (e.target.placeholder = '')}
                              /&gt;
                          &lt;/div&gt;
                          &lt;div className={'col-lg-6 col-12 mt-4'}&gt;
                              &lt;label htmlFor={'country'} className={' text-right'}&gt;
                                  &lt;span&gt;*&lt;/span&gt;
                              &lt;/label&gt;
                              &lt;input
                                  type=&quot;text&quot;
                                  className=&quot;form-control&quot;
                                  placeholder={'category'}
                                  name={'category'}
                                  value={this.state.category}
                                  onChange={this.onChange}
                                  required=&quot;true&quot;
                                  onBlur={(e) =&gt; (e.target.placeholder = 'category')}
                                  onFocus={(e) =&gt; (e.target.placeholder = '')}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/Row&gt;
                     
                      &lt;Row&gt;
                          &lt;div className=&quot;col-12 mt-3 video-upload-input-btn&quot;&gt;
                              &lt;VideoUpload/&gt;
                          &lt;/div&gt;
                      &lt;/Row&gt;
                      &lt;Row&gt;
                          &lt;div className=&quot;col-lg-6 col-12 mt-3&quot;&gt;
                              &lt;PosterUpload/&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;col-lg-6 col-12 mt-3&quot;&gt;
                              &lt;CoverUpload/&gt;
                          &lt;/div&gt;
                      &lt;/Row&gt;
                  &lt;/form&gt;
                 
              &lt;/div&gt;
          );
      }
  }
  </code></pre>