NextJS, it doesn't display on the web but if the data is displayed in console.log - Telegram API

Nizar
January 9, 2021
209 views
2 votes
3 Answers

I have a problem where I use getInitialProps to fetch data but I show on the web it doesn’t appear but if my data is try console.log the data will appear accordingly

{this.props.siswa.map(siswa => {
  {console.log(siswa)}
  <div className="flex">
    <div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
      <img className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src={`/img/siswa/${siswa.id}.jpg`} loading="lazy" />
      <div className="text-center space-y-2 sm:text-left">
         <div className="space-y-0.5">
            <p className="text-lg text-black font-semibold dark:text-gray-200">
               {siswa.panggilan}
            </p>
            <p className="text-gray-500 font-medium dark:text-gray-300">
               {siswa.nama}
            </p>
         </div>
         <button id="om" className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4" onClick={() => this.setState({showModalSiswa: true})}>Detail</button>
      </div>
    </div>
  </div>
})}

this is the data that comes up if I do console.log

{
  id: '1',
  nama: 'Ipsun',
  panggilan: 'ipsun',
  ttl: 'ipsun',
  alamat: 'ipsun',
  nope: '43143',
  ig: '@ipsun',
  line: null,
  telegram: null,
  tiktok: null,
  fb: null,
  linkedin: null,
  pesan: 'ipsun'
}
{
  id: '2',
  nama: 'lorem',
  panggilan: 'lorem',
  ttl: 'lorem',
  alamat: 'lorem',
  nope: '41413',
  ig: '@lorem',
  line: null,
  telegram: null,
  tiktok: null,
  fb: null,
  linkedin: null,
  pesan: 'lorem'
}

Tags: next.js reactjs

Answers

It’s because you’re not returning any jsx from your .map 😉

{this.props.siswa.map(siswa => {
  {console.log(siswa)}
 return (
   <div className="flex">
    <div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
      <img className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src={`/img/siswa/${siswa.id}.jpg`} loading="lazy" />
      <div className="text-center space-y-2 sm:text-left">
         <div className="space-y-0.5">
            <p className="text-lg text-black font-semibold dark:text-gray-200">
               {siswa.panggilan}
            </p>
            <p className="text-gray-500 font-medium dark:text-gray-300">
               {siswa.nama}
            </p>
         </div>
         <button id="om" className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4" onClick={() => this.setState({showModalSiswa: true})}>Detail</button>
      </div>
    </div>
  </div>
  )
})}

Or you can return like this:

{this.props.siswa.map(siswa => 
  <div className="flex">
    <div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
      <img className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src={`/img/siswa/${siswa.id}.jpg`} loading="lazy" />
      <div className="text-center space-y-2 sm:text-left">
         <div className="space-y-0.5">
            <p className="text-lg text-black font-semibold dark:text-gray-200">
               {siswa.panggilan}
            </p>
            <p className="text-gray-500 font-medium dark:text-gray-300">
               {siswa.nama}
            </p>
         </div>
         <button id="om" className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4" onClick={() => this.setState({showModalSiswa: true})}>Detail</button>
      </div>
    </div>
  </div>
}

Alternatively, you can omit the return keyword by using an implicit return:

const ComponentTest = ({ siswa }) =>
  siswa.map((siswa) => (
    <div className="flex">
      {console.log(siswa)}
      <div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
        <img
          className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0"
          src={`/img/siswa/${siswa.id}.jpg`}
          loading="lazy"
        />
        <div className="text-center space-y-2 sm:text-left">
          <div className="space-y-0.5">
            <p className="text-lg text-black font-semibold dark:text-gray-200">
              {siswa.panggilan}
            </p>
            <p className="text-gray-500 font-medium dark:text-gray-300">
              {siswa.nama}
            </p>
          </div>
          <button
            id="om"
            className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4"
            onClick={() => this.setState({ showModalSiswa: true })}
          >
            Detail
          </button>
        </div>
      </div>
    </div>
  ));

Note the console.log is within JSX, this is fine since it is wrapped with curly brackets and gets evaluated.

Please signup or login to give your own answer.

Click here to cancel reply.

NextJS, it doesn't display on the web but if the data is displayed in console.log – Telegram API

Answers