undefined tag into preact component

Question

I'm very new to preact and i'm trying to implement a PWA in preact. In particular, this example should display a list of people id.

This is index.html page:

<!DOCTYPE html>
<html>
  <head>
    <!--Some elements here-->
  </head>
  <body>
    <div id="root">
    </div>
    <script>
    if('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js', { scope: '/' })
        .then(function(registration) {
              console.log('Service Worker Registered');
        });
      navigator.serviceWorker.ready.then(function(registration) {
         console.log('Service Worker Ready');
      });
    }
    </script>
    //some other scripts
  </body>
</html>

Into src/ folder there is index.js:

import { h, render, Component } from 'preact';
import request from 'superagent';
import Router from 'preact-router';
import Home from './components/homepage';
import PeopleList from './components/people/PeopleList';
import PeopleItem from './components/people/PeopleItem';
import Navigation from './components/navigation';

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentURL: '/',
      people: {},
    };
    this.setPeople = this.setPeople.bind(this);
    this.onRouteChange = this.onRouteChange.bind(this);
  }

  setPeople({results})
  {
    this.setState({people: results});
  }

  onRouteChange() {
    const pageElement = document.querySelector('.page');
    if (pageElement) {
      pageElement.scrollTop = 0;
      this.setState({
        currentURL: window.location.pathname,
      });
      if(this.state.currentURL == '/people')
      {
        var that = this;
        //webservice api request
        const url = 'https://api.mysite.it/v2/index.php/api/events/people_api_new?id_event=<int>';
        fetch(url,{
          method: 'get',
          headers: {
            //my headers,
          },
        }).then(function(response)
        {
          if(response.status !== 200)
          {
            console.log('server problem');
            return;
          }
          return response.json();
        }).then(function(j){
          console.log(j.people);
          that.setState(
            {
              people: j.people,
            }
          );
        });
        console.log(this.state.people);
      }
      else
      {
         //other
      }
    }
  }


  render(props, state) {
    console.log('render people ' + state.people);
    return (
      <main class="main">
        <div class="page">
            <Router onChange={this.onRouteChange}>
            <Home path="/" />
            <PeopleList path="/people" people={state.people} />
          </Router>
        </div>
        <Navigation currentURL={state.currentURL} />
      </main>
    );
  }
}

render(<Main />, document.getElementById('root'));

I could obmit Navigation element (this is the navigation menu and when i click on the People element, onRouteChange event should call the api and after display that page.

This is PeopleList element (file PeopleList.js):

import { h, Component } from 'preact'
import PeopleItem from './PeopleItem'

const PeopleList = ({
  people
}) => (

         <div class="listPeople">
         {
            $.each(people, function(k,v)
            {
                 <PeopleItem person = {v.people_id} />
            })
         }
         </div>
)

export default PeopleList

In this case, people is an object as structured:

{"1":{"user_id":"1"},"2":{"user_id":"2"} //JSON string of people object came from webservice api

Finally, this is the PeopleItem element:

import { h, Component } from 'preact'

const PeopleItem = (person) => (
            <div>
            {
                person
            }
            </div>
    )

export default PeopleItem

When i go to people page, PWA is able to read people object coming from server api, but instead of PeopleItem element, i get undefined tag, as follows:

<div id="root">
<main class="main">
<div class="page>
<div class="listPeople">
<undefined>
</undefined>
</div>
</div>
</main>
<!-- Navigation element -->
</div>

Why do i view undefined tag on page? I should view:

<div>1</div>
<div>2</div>

instead of:

<undefined></undefined>

Answer 1

The problem is here: const PeopleItem = (person)

The way you have it written, person is the props object. You need to access person within that object.

To do that, you can destructure the props object like so;

const PeopleItem = ({ person }) => (
  <div>{person}</div>
)

Or write the PeopleItem like so:

const PeopleItem = (props) => (
  <div>{props.person}</div>
)

Answer 2

Thank you for your great help. I modified PeopleList.js and PeopleItem.js as follows:

PeopleList.js

import { h, Component } from 'preact'
import PeopleItem from './PeopleItem'

   const PeopleList = (
     props
   ) => (

         <div class="listPeople">
         {
            $.map(props.people, function(k,v)
            {
                 return <PeopleItem person = {v} /> // v is the key and for now i used it as id, after i will modify something.
            })
         }
         </div>
   )

   export default PeopleList

PeopleItem.js

import { h, Component } from 'preact'

const PeopleItem = (props) => (
    <div>{props.people}</div>
)

export default PeopleItem

And now works!

undefined tag into preact component

Question

2 answers

solution1
3 2017-08-07 17:08:44

solution2
1 2017-08-07 19:36:33

undefined tag into preact component

Question

2 answers

solution1 3 2017-08-07 17:08:44

solution2 1 2017-08-07 19:36:33

solution1
3 2017-08-07 17:08:44

solution2
1 2017-08-07 19:36:33