how to return a string from map using reactjs

Question

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

    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 <li  key={index.toString()} >{name.source.toString()} {name.destination.toString()} {name.protocol.toString()} {name.ports.toString()}</li>
}).reduce((prev, curr) => [prev, ', ', curr]);

showConfirm('',`You are about to approve a local market exemption. Click to confirm! <ul>${flows}</ul>`,()=>{submitApprove(args);self.props.clearModal()},()=>self.props.clearModal(),confirmOptions);

showConfirm open the following modal

    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 > 0 || this.props.modals.confirmMsg !== null) {
                   bodyWrapper = Parser(this.props.modals.confirmMsg);
                }
                bodyWrapper = <div className="row-fluid" style={{ wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(bodyWrapper) }} />;
            }

            return (
                <Modal id="myModalReduxConfirm" className="modal fade" role="dialog" show={this.props.modals.showConfirm}>
                    {this.renderTitle()}
                    <Modal.Body>
                        {bodyWrapper}
                    </Modal.Body>
                    <Modal.Footer>
                        <Button bsClass="btn btn-success btn-sm" onClick={this.props.handleConfirmYes} disabled={yesDisabled}>{yesText}</Button>
                        <Button bsClass="btn btn-default btn-sm" onClick={this.props.handleConfirmNo} disabled={noDisabled}>{noText}</Button>
                    </Modal.Footer>
                </Modal>
            );
        }
    }
...

result

You are about to approve . Click to confirm! <ul>[object Object],, ,[object Object],, ,[object Object],, ,[object Object],, ,[object Object],, ,[object Object]</ul>

UPDATE

i changed to the following now it does not pass string but just displays object.

self.props.showConfirm('',() => flows,()=>{submitApprove(args);self.props.clearModal()},()=>self.props.clearModal(),confirmOptions);

console.log(this.props.modals.confirmMsg());

displays

{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]

You can see the body shows f and when i log it, it does not interpret the object

Please post a complete example. For example, be sure to include a variable declaration for found and any other variables used. Note that in your current implementation, the invocation of map() will return an array of React components, not a string. — Code-Apprentice
– Code-Apprentice, Commented Feb 12, 2019 at 16:56

Treycos · Accepted Answer · 2019-02-12 18:22:26Z

Your JSX elements cannot be rendered in arrays that mixes them with strings. And using reduce with JSX will often lead to headaches.

A quick solution to your problem would be to map your array directly and check if the element is not the last of the array to add the , :

const found = [
    {
        name: {
            source: "eirglerk",
            destination: "zlekjrnzi"
        }
    },
    {
        name: {
            source: "lkcyukyuk",
            destination: "uylcl"
        }
    },
    {
        name: {
            source: "trutrurt",
            destination: "culcul"
        }
    }
]

const App = props => (
    <p>
        You are about to approve . Click to confirm!
        <ul>
            {found.map(({ name, index }, i) => 
                <li key={index}> {name.source} {name.destination} {name.protocol} {name.ports}{i !== found.length - 1 && ','}</li>
            )}
        </ul>
    </p>
)


ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

Or by keeping your code, you can do the following if you encapsulter the comma into a JSX element :

const found = [
    {
        name: {
            source: "eirglerk",
            destination: "zlekjrnzi"
        }
    },
    {
        name: {
            source: "lkcyukyuk",
            destination: "uylcl"
        }
    },
    {
        name: {
            source: "trutrurt",
            destination: "culcul"
        }
    }
]

const App = props => (
    <p>
        You are about to approve . Click to confirm!
        <ul>
            {found
                .map(({ name, index }) => <li key={index}> {name.source} {name.destination} {name.protocol} {name.ports}</li>)
                .reduce((prev, elem) => [prev, <span>,</span>, elem])}
        </ul>
    </p>
)


ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

You will need to ass some CSS to keep your commas inline though

the problem with this one is i cant pass the flows to the function i am trying to make use of a reusable modal

Baby Step · Accepted Answer · 2020-01-11 09:31:06Z

0

Assume if I have found1, found2 and found3, based on the clicked button change I switch and map to loop the structure?

const found1 = [
{
    name: {
        source: "eirglerk",
        destination: "zlekjrnzi"
    }
},
{
    name: {
        source: "lkcyukyuk",
        destination: "uylcl"
    }
},
{
    name: {
        source: "trutrurt",
        destination: "culcul"
    }
}
]

const found2 = [
    {
        name: {
            source: "eirglerk",
            destination: "zlekjrnzi"
        }
    },
    {
        name: {
            source: "lkcyukyuk",
            destination: "uylcl"
        }
    },
    {
        name: {
            source: "trutrurt",
            destination: "culcul"
        }
    }
]

var foundtype = "found1"

JSON.foundtype.map(() => { 
//Load found1 data
}

answered Jan 11, 2020 at 9:31

Baby Step

1

1 Comment

Thailo Over a year ago

Your current question is quite ambiguous, please refine it to make it more concrete. Also, if you add your desired result and the things you tried already people are able to help you faster.

Collectives™ on Stack Overflow

how to return a string from map using reactjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related