NEW to ionic/react and stumped :D

tutorials
1

I come from the musky world of old school js and php … I am trying to implement a simple IonSelec> with option list loaded by API from server … however I am having trouble as my inline ts that is o render the options executes before the object is populated … is there a good tutorial specific for REACT/ionic re this case ?

2

can you show what you have tried already?

3

Type children: never has no properties in common with type ‘IntrinsicAttributes’. TS2559

^

Getting that from view on :smile: from

import React from ‘react’;
import { useRootStoreData } from ‘…/stores’;

const mainStore = useRootStoreData(r => r.mainStore);

interface AutocompleteInputProps {
placeholder: string;
}

function unpacker() {

return ( mainStore.cities.map( el => {
					return ( 
								<IonSelectOption key={el.id} value={el.id}>
									{el.city_name}
								</IonSelectOption>
					);
				}
		)
	)

}

function AutocompleteInput() {
return ( <> unpacker() </> );
}
export default AutocompleteInput;

IonSelect interface=“action-sheet” placeholder=“Select City”>
AutocompleteInput>
^<----------------------------- it appears to waant a differnt property of object ?
AutocompleteInput>
IonSelect>

I know I am probably doing everything wrong …suggestions for in depth docs or tutorials ?
what I want to achieve is easy with standard web dev ajax … here I already have the API data in store just need to apply it to generate options

4

MOst references around here are for Angular … it seems like React is less covered here … would be nice to have a small resource on dynamically populated IonSelect

5

@fringesurfer react is covered here…

<label htmlFor="people">
   Filter by Status &nbsp;
   <select
      id="people"
      name="people"
      onChange={this.props.handleOnChangePeople}
       >
         {this.state.people && this.state.people.map(p => {
           return <option key={p.phone} value={p.phone}>{p.name.first}</option>;
      })}
   </select>
</label>

  componentDidMount() {
    this.loadAllPeople();
  }


  loadAllPeople = async () => {
    // using async await
    let url = "https://randomuser.me/api/?results=10";
    let response = await fetch(url);
    let result = await response.json();
    this.setState({ people: result.results });
  };
6

This throws
The containing arrow function captures the global value of ‘this’.
on this line

onChange={this.props.handleOnChangeCities}

const CoverageSearch: React.FunctionComponent = () => {

  const { t } = useTranslation();

  const mainStore = useRootStoreData(r => r.mainStore);

  return (
    <>
      <Layout headerTitle="Search Coverage">
        <IonContent>
		<IonList>
			<IonItem>
					<IonSelect interface="action-sheet" placeholder="Select City"
					id="cities"
					name="cities"
					onChange={this.props.handleOnChangeCities}
					>
							{this.state.cities && mainStore.Cities.map(p => {
								   return <IonSelectOption key={p.id} value={p.id}>{p.city_name}</IonSelectOption>;
							  })}
					</IonSelect>
							
			  </IonItem>

@aaronksaunders … ty for the leads …

7

this compiles but it does seems to render when the array is mainstore.Cities array is still empty

		<IonItem>
				<IonSelect interface="action-sheet" placeholder="Select City">
					{ mainStore.Cities.map(el => {
					  return (
						<IonSelectOption key={el.id} value={el.id}>
						  {el.city_name}
						</IonSelectOption>
					  );
					})}
				</IonSelect>
						
		  </IonItem>
8

there is no way i could possibly know what mainstore is let alone why it is empty based on the code you provided :confused:

9

thanks … trying out free version of a mobi plugin … lets see if this helps … have a good friday night!!!