Basic help with React Komposer, props and states, multi-component

help
1

I’m new to Meteor, new to JavaScript and new to everything and I’m stuck on what, probably, will be an easy thing…

I have in my application a page that fetches data from an HTTP API, with the help of a container, and shows the results in a UI component. I’m using react-komposer for this.

It’s working fine with the hardcoded arguments to the HTTP API call but now I’m reading posts and blogs for three days trying to get the arguments to call the API from the user in a reactive way (two date-times, and two more values from two selection lists).

The problem I have is: how should I pass up the results from the datepickers and selection lists in the component where the UI resides so I can re-query the api and render the list again?

All solutions I find until now direct me to using an store as Redux but as I just started learning I prefer to avoid another level of complexity (all this is enough complex as is :innocent:).

Any help would be greatly appreciated.
Thank you.

Mario

2

1.) your container / component that is composed with react-komposer should take all these props:

// ignore context if its not a mantra app
const composer = ({context, startDate, endDate, someValue, otherValue}, onData) => {
   // do the call
   HTTP.get("http://example.com/?startDate="+startDate+"...etc...", onData)
}

```

so that it can be called like this

```
<FancyHttpLoadingList startDate={startDate}  endDate={endDate} someValue={someValue} otherValue={otherValue} />

```

now you have a component where you can specify the dates. I would suggest to call it now with your "hardcoded" arguments, but as properties of the component to see if it works still fine.



2.) now, wrap your `<FancyHttpLoadingList />` in another component that has some state (React.Component instance, or recompose or redux, or LocalState, ...)

here an example with recompose (notice: instead of "compose" from recompose you can use composeAll from react-komposer (but the order is reversed))

```
import { withState, compose } from 'recompose;

const enhance = compose(
  withState("startDate", "setStartDate"),
  withState("endDate", "setEndDate"),
  withState("someValue", "setSomeValue"), // ...
)

const FancyListWithDatePickerAndStuff = enhance( ( { startDate, setStartDate, endDate, setEndDate, someValue, setSomeValue } ) => (
  <div>
     <DatePicker onChange={setStartDate} value={startDate} />
     <DatePicker onChange={setEndDate} value={endDate} />
     <ListSelect onChange={setSomeValue} value={someValue} />
     <FancyHttpLoadingList startDate={startDate}  endDate={endDate} someValue={someValue} otherValue="xyz" />
  </div>
))
```

hope this helps!


Edit: without recompose, you can also just use

class FancyListWithDatePickerAndStuff extends React.Component {

render() {
return (


<DatePicker onChange={startDate => this.setState({startDate}) value={this.state.startDate} />
// …

)
}
} 

but i try to avoid classes whenever possible and prefer function stateless components, but that's a matter of taste. If you are new to react, it's helpful to look at these different "flavours" and the basics
3

Hi.

Thank you very much for your answer and guidance. It’s working now!

Oh, this thing is really complex!::smirk:

It took me three days fighting, after I saw your message, not with props and states, but with something much more simple: just to put the two datetimepicker and two select elements, go figure. I still have some issues with this, probably will have to write another message asking for help with this.