在 jsx 中渲染 amp-mustache

Question

How can I render amp-mustache inside of JSX ? Here I'm using GatsbyJS. I have try this syntax to render the output from amp-mustache { {{title}} } but what I got just the autocomplete dropdown without text. Below is my file header.js

header.js

import PropTypes from "prop-types"
import React, { Component, Fragment } from "react"
import {Link} from "gatsby"
import {AMP} from 'react-amp-template'
class Header extends Component {
  state = {
    keyword: ``,
    dataAPI: []
  }

  search_article = (event) => {
    this.setState({
      keyword: event.target.value
    })
  }
  
  render() {
    return (
      <>
        <header
          className="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0"
        >
          <div className="container">
            <div
              role="button"
              aria-label="open sidebar"
              on="tap:header-sidebar.toggle"
              className="ampstart-navbar-trigger"
              id="button-toggle-sidebar"
            >
              <span className="text-green">☰</span>
            </div>
            <span id="header-logo"><amp-img src="https://www.ibupedia.com/static/img/ibupedia-logo.png" width="150" height="62" alt="Ibupedia Logo"/></span>
            <nav className="navbar navbar-expand-lg navbar-light" id="custom-navbar">
              <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav mr-auto">
                  <li className="nav-item active">
                    <Link className="nav-link" style={{color: "#fff"}} to="#">Panduan Covid-19 <span className="sr-only">(current)</span></Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="#" style={{color: "#fff"}}>Konsepsi</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="#" style={{color: "#fff"}}>
                      Kehamilan
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="#" style={{color: "#fff"}}>Kelahiran</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="#" style={{color: "#fff"}}>Balita</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="#" style={{color: "#fff"}}>Kesehatan</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="#" style={{color: "#fff"}}>Keluarga</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="#" style={{color: "#fff"}}>Infografis</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to="#" style={{color: "#fff"}}>Nama Bayi</Link>
                  </li>
                </ul>
                <form className="form-inline my-2 my-lg-0">
                  <Fragment>
                    <AMP.Script
                      async 
                      custom-template="amp-mustache" 
                      src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
                    ></AMP.Script>
                    <amp-autocomplete src="http://localhost:8000/articles/" filter="token-prefix" filter-value="title">
                      <div className="input-group">
                        <input type="text" className="form-control" placeholder="Cari Artikel"/>
                        <div className="input-group-append">
                          <span className="input-group-text" id="basic-addon2"><i className="fa fa-search"></i></span>
                        </div>
                      </div>
                      <template type="amp-mustache" id="amp-template-custom">
                        <div class="city-item" data-value="{{items}}">
                            <div>{`{{title}}`}</div>
                        </div>
                      </template>
                    </amp-autocomplete>
                  </Fragment>
                </form>
              </div>
            </nav>
          </div>
        </header>
        <nav className="navbar navbar-expand-lg" id="second-navbar">
          <div className="container">
            <Link className="navbar-brand" to="#"><span className="font-bold font-19 grey-text">PANDUAN:</span></Link>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarNav">
              <ul className="navbar-nav">
                <li className="nav-item active">
                  <Link className="nav-link" to="#"><span className="font-bold text-green font-19">Kehamilan Minggu ke Minggu</span> <span className="grey-text font-bold font-19">|</span></Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="#"><span className="font-bold text-green font-19">Kelahiran</span> <span className="grey-text font-bold font-19">|</span></Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="#"><span className="font-bold text-green font-19">Bayi Umur 1-2 Tahun</span> <span className="grey-text font-bold font-19">|</span></Link>
                </li>
                <li className="nav-item">
                  <Link className="nav-link" to="#"><span className="font-bold text-green font-19">Bayi Umur 2-5 Tahun</span></Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <amp-sidebar
          id="header-sidebar"
          class="ampstart-sidebar px3"
          layout="nodisplay"
        >
          <div className="flex justify-start items-center ampstart-sidebar-header">
            <div
              role="button"
              aria-label="close sidebar"
              on="tap:header-sidebar.toggle"
              className="ampstart-navbar-trigger items-start"
            >
              <span class="text-green">✕</span>
            </div>
          </div>
          <nav className="ampstart-sidebar-nav ampstart-nav">
            <ul className="list-reset m0 p0 ampstart-label">
              <li className="ampstart-nav-item ampstart-nav-dropdown relative">
                <amp-accordion
                  layout="container"
                  disable-session-states=""
                  class="ampstart-dropdown"
                >
                  <section>
                    <header>Panduan</header>
                    <ul className="ampstart-dropdown-items list-reset m0 p0">
                      <li className="ampstart-dropdown-item">
                        <Link to="#" className="text-decoration-none">Kehamilan Minggu ke Minggu</Link>
                      </li>
                      <li className="ampstart-dropdown-item">
                        <Link to="#" className="text-decoration-none">Kelahiran</Link>
                      </li>
                      <li className="ampstart-dropdown-item">
                        <Link to="#" className="text-decoration-none">Bayi Umur 1-2 Tahun</Link>
                      </li>
                      <li className="ampstart-dropdown-item">
                        <Link to="#" className="text-decoration-none">Bayi Umur 2-5 Tahun</Link>
                      </li>
                    </ul>
                  </section>
                </amp-accordion>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Panduan Covid-19</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Konsepsi</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Kehamilan</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Kelahiran</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Balita</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Kesehatan</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Keluarga</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Infografis</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Nama Bayi</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Tentang Ibupedia</Link>
              </li>
              <li className="ampstart-nav-item">
                <Link className="ampstart-nav-link" to="#">Advertise With Us</Link>
              </li>
            </ul>
          </nav>
        </amp-sidebar>
      </>
    )
  }
  
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

Please Help 🙏 Thank you

Answer 1

Both the background color and text color are set to white on the resulting divs. Try setting .city-item { color: '#000'; } .city-item { color: '#000'; }