reactjs not translating object and html

Question

I am returning a map that outputs a list and storing this in a state with html and text which is passed to an error component. problem is the list is displayed as an object and the html is displayed as raw text and not being translated.

the below code is set and passed in to a component

let fwobjectList = fwobject.map(function(name, index) {
  console.log(name.id);
  console.log(name);
  console.log(index);
  return <li key={index}>{name.id}</li>;
});
this.setState({
  showError: true,
  errorMsg: `You cannot delete rows where FW Object names have been used. Please unselect row id's<ul>' + ${fwobjectList} + '</ul>`
});

component calls the error modal in render

return (
  <div className="container-fluid">
    ...
    <ModalError
      title={this.state.errorTitle}
      body={this.state.errorMsg}
      show={this.state.showError}
      handleCloseError={this.handleCloseError}
    />
    ...
)

my render function in the error modal.

render(){
        let title = 'Error';
        let body = 'Unexpected error occured';
        if(this.props.title.length > 0){
            title = this.title.body;
        }
        if(this.props.body.length > 0){
            body = this.props.body;
        }
        return (
                <Modal
                    id="myModalError"
                    className="modal fade"
                    role="dialog"
                        show={this.props.show}
                >
                    <Modal.Header closeButton className="modal-header alert alert-danger">
                        <Modal.Title>{title}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        {body}
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.handleCloseError}>Close</Button>
                    </Modal.Footer>
                </Modal>
        );
    }

the output i see in the browser is

"You cannot delete rows where FW Object names have been used. Please unselect row id's<ul>' + [object Object] + '</ul>"

i want the following printed

"You cannot delete rows where FW Object names have been used. Please unselect row id's

 - 123
 - 234
 - 456

"

UPDATE

if i use example from this link Insert HTML with React Variable Statements (JSX) i get the following

You cannot delete rows where FW Object names have been used. Please unselect row id's
' +
3043
+ '

UPDATE 2

I managed to do fwobjectIds.join().toString() but this leaves a comma in between which i do not want. how to remove the comma.

You cannot delete rows where FW Object names have been used. Please unselect row id's
3043
,
3042

Isn't it `${name}` instead of `${fwobjectList}`? – Bhojendra Rauniyar Sep 10 '18 at 10:45 — Bhojendra Rauniyar, Sep 10 '18 at 10:45
`$(name)` is only used within the map function – shorif2000 Sep 10 '18 at 10:47 — shorif2000, Sep 10 '18 at 10:47
What exactly you wanted to be printed? – Bhojendra Rauniyar Sep 10 '18 at 10:49 — Bhojendra Rauniyar, Sep 10 '18 at 10:49

score 1 · Answer 1 · answered Sep 10 '18 at 10:58

1

You can implement like this:

let ids = []
let fwobjectList = fwobject.map(function(name, index) {
  ids.push(`<li>${name.id}</li>`)
  return <li key={index}>{name.id}</li>;
});
this.setState({
  showError: true,
  errorMsg: `You cannot delete rows where FW Object names have been used. 
     Please unselect row id's<ul> ${ids.join()} </ul>`
// no need to concatenate when using template literal above
});

answered Sep 10 '18 at 10:58

Bhojendra Rauniyar

83,432
35
168
231

i have tried tihs but the reuslt is shows as `"You cannot delete rows where FW Object names have been used. Please unselect row id's
- 3043
"`. it doesn't seem to be translating the html code
– shorif2000 Sep 10 '18 at 12:36
Use dangerouslySetInnerHtml where you're printing errorMsg – Bhojendra Rauniyar Sep 10 '18 at 14:07

flq · Answer 2 · 2018-09-10T12:57:54.890

0

Bear in mind that your errorMsg is a string, and not react components. You could go a route by using dangerouslySetInnerHtml, but, as the name suggests, this is not the best idea.

I think the best course of action is to encode the values that you want to output in the error modal into the state and then render those values in the render branch displaying the error.

this.setState({ showError: true, rowIds: fwObject.map(o => o.name) })

…

<ErrorModal>
  <p>You cannot…</p>
  <ul>
    { rowIds.map(r => <li>{r}</li>)  }
  </ul>
</ErrorModal>

I guess you want some universal error popup. In that case your approach may have to be different, but the question is if You Will Need It™

edited Sep 10 '18 at 12:57

answered Sep 10 '18 at 12:52

flq

22,247
8
55
77

what do you mean by `encode the values`. i tried `dangerouslySetInnerHtml` but that displays the `+` from the `join` – shorif2000 Sep 10 '18 at 12:55
Well, the dangerously does require HTML, I would expect, so putting the message in a span may help. Still, I'd advise against that route – flq Sep 10 '18 at 12:59
i do want to keep it universal. how can i change this to string `fwobjectList` after the map so its not JSX. would this solve problem? – shorif2000 Sep 10 '18 at 13:04

reactjs not translating object and html

2 Answers2