How put element into a JSX code?

#1

Hi all
I created an element as following:

let brandItemElement = <p>{ReasonReact.stringToElement("Hello")}</p>;

and an element based on navMenuElement:

let navMenuElement = (
  <div className="navbar-menu is-active">
    <div className="navbar-start">
      **<-- I will add brandItemElement here -->**
    </div>
  
    <div className="navbar-end">
      <div className="navbar-item">
        <div className="field is-grouped">
          <p className="control">
            <a className="button is-link is-inverted is-outlined">{ReasonReact.stringToElement("Sign Up")}</a>
          </p>
          <p className="control">
            <a className="button is-link is-inverted is-outlined">{ReasonReact.stringToElement("Sign In")}</a>
         </p>
        </div>
      </div>  
    </div>
  </div>);

The question is, how to add the element inside navMenuElement. I marked it, where I want to place.

Thanks

#2

Easy :slight_smile:

#3

I can’t see any code. Perhaps you did not save it.

#4

You wrap your element brandItemElement in curly braces. Your JSX would look like:

<div className="navbar-start">
  {brandItemElement}
</div>

Example

#5

Thanks a lot for your help.

#6

Sorry, it was showing this:

let brandItemElement = <p>{ReasonReact.stringToElement("Hello")}</p>;
let navMenuElement = (
  <div className="navbar-menu is-active">
    <div className="navbar-start">
      brandItemElement
    </div>
  
    <div className="navbar-end">
      <div className="navbar-item">
        <div className="field is-grouped">
          <p className="control">
            <a className="button is-link is-inverted is-outlined">{ReasonReact.stringToElement("Sign Up")}</a>
          </p>
          <p className="control">
            <a className="button is-link is-inverted is-outlined">{ReasonReact.stringToElement("Sign In")}</a>
         </p>
        </div>
      </div>  
    </div>
  </div>);

(no braces needed with the current version btw)