title: how to return a string from map using reactjs
body: <p>i have map function which i want to return html string and join to another string and display on modal. i am passing it through function params. The map seems to return array of objects and i am unsure how to convert this to string</p>
  
  <pre><code>    let found = [];
  found.push({source:'x',destination:'x',protocol:'x',ports:'x'});
  found.push({source:'y',destination:'y',protocol:'y',ports:'y'});
  let flows = found.map(function(name, index){
      return &lt;li  key={index.toString()} &gt;{name.source.toString()} {name.destination.toString()} {name.protocol.toString()} {name.ports.toString()}&lt;/li&gt;
  }).reduce((prev, curr) =&gt; [prev, ', ', curr]);
  
  showConfirm('',`You are about to approve a local market exemption. Click to confirm! &lt;ul&gt;${flows}&lt;/ul&gt;`,()=&gt;{submitApprove(args);self.props.clearModal()},()=&gt;self.props.clearModal(),confirmOptions);
  </code></pre>
  
  <p><strong>showConfirm open the following modal</strong></p>
  
  <pre><code>    class ModalConfirm extends Component {
          ...
  
          render() {
              let yesDisabled = false;
              let yesText = 'Yes';
              let noDisabled = false;
              let noText = 'No';
  
              if (typeof this.props.modals.confirmOptions !== 'undefined') {
                  yesDisabled = (typeof this.props.modals.confirmOptions.confirmYesDisabled !== 'undefined') ? this.props.modals.confirmOptions.confirmYesDisabled : false;
                  yesText = (typeof this.props.modals.confirmOptions.confirmYesText !== 'undefined') ? this.props.modals.confirmOptions.confirmYesText : 'Yes';
                  noDisabled = (typeof this.props.modals.confirmOptions.confirmNoDisabled !== 'undefined') ? this.props.modals.confirmOptions.confirmNoDisabled : false;
                  noText = (typeof this.props.modals.confirmOptions.confirmNoText !== 'undefined') ? this.props.modals.confirmOptions.confirmNoText : 'No';
              }
  
              let bodyWrapper = 'Are you sure you want to confirm?';
              if (typeof this.props.modals.confirmMsg === 'string') {
                  if (this.props.modals.confirmMsg.length &gt; 0 || this.props.modals.confirmMsg !== null) {
                     bodyWrapper = Parser(this.props.modals.confirmMsg);
                  }
                  bodyWrapper = &lt;div className="row-fluid" style={{ wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(bodyWrapper) }} /&gt;;
              }
  
              return (
                  &lt;Modal id="myModalReduxConfirm" className="modal fade" role="dialog" show={this.props.modals.showConfirm}&gt;
                      {this.renderTitle()}
                      &lt;Modal.Body&gt;
                          {bodyWrapper}
                      &lt;/Modal.Body&gt;
                      &lt;Modal.Footer&gt;
                          &lt;Button bsClass="btn btn-success btn-sm" onClick={this.props.handleConfirmYes} disabled={yesDisabled}&gt;{yesText}&lt;/Button&gt;
                          &lt;Button bsClass="btn btn-default btn-sm" onClick={this.props.handleConfirmNo} disabled={noDisabled}&gt;{noText}&lt;/Button&gt;
                      &lt;/Modal.Footer&gt;
                  &lt;/Modal&gt;
              );
          }
      }
  ...
  </code></pre>
  
  <p><strong>result</strong></p>
  
  <pre><code>You are about to approve . Click to confirm! &lt;ul&gt;[object Object],, ,[object Object],, ,[object Object],, ,[object Object],, ,[object Object],, ,[object Object]&lt;/ul&gt;
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>i changed to the following now it does not pass string but just displays object.</p>
  
  <pre><code>self.props.showConfirm('',() =&gt; flows,()=&gt;{submitApprove(args);self.props.clearModal()},()=&gt;self.props.clearModal(),confirmOptions);
  </code></pre>
  
  <p>console.log(this.props.modals.confirmMsg());</p>
  
  <p><strong>displays</strong> </p>
  
  <pre><code>{store: undefined, title: "", body: ƒ, show: true, handleConfirmYes: ƒ, …}body: ƒ ()clearModal: ƒ ()confirmOptions: {confirmYesText: "Confirm", confirmYesDisabled: false, confirmNoText: "Cancel", confirmNoDisabled: false}handleConfirmNo: ƒ ()handleConfirmYes: ƒ ()modals: {showConfirm: true, confirmTitle: "", confirmMsg: ƒ, handleConfirmYes: ƒ, handleConfirmNo: ƒ, …}show: truestore: undefinedtitle: ""__proto__: Object
  main.bundle.js:200439 
  [object Object][object Object][object Object][object Object][object Object][object Object]
  </code></pre>
  
  <p>You can see the body shows <code>f</code> and when i log it, it does not interpret the object</p>