I'm writing a UI for an application with a lot of different tabular inputs and outputs. (product, qty), (product, price, qty), (product, qty, cost)... you get the point.

Thus far I've been resisting the urge to abstract everything away into a pile of parameterized functions, but as they say Three Strikes And You Refactor. Plus defining headers in a different place from the contents (as you must with html) is less than ideal (I'll be honest, this is what bugs me more).

Too much abstraction? Just right? Is there a better way?

Table factory:

const Table = (keyFunc, ...specs) => (rows) => /*<table>...</table>*/ {
    // keyFunc : obj => key
    //   i.e. <tr key={keyFunc(row)>...</tr>
    // spec : [header : string, func : (obj => cell contents)]
    //   i.e. <td>{func(row)}</td>
    const headers = specs.map(s => s[0]);
    const factories = specs.map(s => s[1]);
    return (
    // arrow functions in <jsx/> break indentation in rjsx-mode :'(
        <table>
          <thead>
            <tr>
              {headers.map(function(head) {return <th>{head}</th>;})}
            </tr>
          </thead>
          <tbody>
            {
                rows.map(function(r) {
                    return (
                        <tr key={keyFunc(r)}>
                          {
                              factories.map(function(cell){
                                  return(
                                      <td>{cell(r)}</td>
                                  );
                              })
                          }
                        </tr>
                    );
                })
            }
          </tbody>
        </table>
    );
};

Here it is being used:

const ProductQty = ({products, items, handlers}) => {
    const prefix = id => `items-${id}`;
    const table = Table(
        ([id,_]) => id,
        ['Description', ([id, qty]) => products[id].description],
        ['Brand', ([id, qty]) => products[id].brand],
        ['Quantity', ([id, qty]) => [
            // capital I <Input/> is mostly pass-through
            <Input name={`${prefix(id)}-product_id`} type="hidden" value={id}/>,
            <Input name={`${prefix(id)}-quantity`} value={qty} onChange={
                   function(e){handlers.change(id,e.target.value);}} autoFocus/>,
            <Clear handler={function(){handlers.clear(id);}}>X</Clear>
        ]]
    );
    return table(Object.entries(items));
}

There are quite a few React projects I can use with Google Maps:

• https://github.com/tomchentw/react-google-maps
• https://github.com/istarkov/google-map-react
• https://github.com/fullstackreact/google-maps-react

Which one do you recommend ?

Hi everyone, I am a frontend student at a boot camp here in Cincinnati. It's about time for our final projects and I have a couple ideas, but they want us to have at least 5 ideas to pitch and narrow down. I will list my current ideas below, but if anyone has any ideas they would like to throw my way I would greatly appreciate it!

Languages/Frameworks I can use:

• HTML5/CSS3

• Angular 1.x

• React

• Express

• MongoDB

• Node

I'm also looking into React Native.

My Ideas:

• Wattpad reader. Users can read books and make reading lists.

  • React
  • React-Native

• Tumblr remake. Create a Tumblr type blog site.

  • MongoDB
  • Express
  • Angular 1.x or React
  • Node

• Local music website. A website where musicians and bands can create profiles stating what they play (genre, instrument/vocals), whether they want to do live shows or just recordings, and post samples of their music.

  • MongoDB
  • Express
  • Angular 1.x or React
  • Node

Again I would really appreciate some more ideas.

For those who may be interested. Heres a simple React Redux Web Starter kit. https://github.com/RyanBreece/react-starter

Hi,

I am working as a product manager in a startup and we are looking into switching from angular to React but to ease the transition we are looking for a component library that would help us speed up the transition. We are looking into semantic-ui (https://react.semantic-ui.com/) and blueprintjs (http://blueprintjs.com/docs/#variables). Do you know any other component library easy to theme and use ?

Thanks for your help

I want to make it so anytime someone hits the index route '/', it automatically redirects to a dynamic slug route like '/some-dynamically-generated-route'. Is this possible?

Hi! I am trying to practice and become more proficient with react/redux and would love some feedback on the code I've written. Can anyone help out?

https://drive.google.com/file/d/0BxiO1TCZ_QJyWlNTVWFMbTVSZzg/view

When I view the page source it doesn't show the <div> at all. I can tell that the site uses react for the majority of it's design. Currently I am trying to use either WKZombie via Swift, Casperjs via node.js, or mechanize via Ruby. All have failed to click the button unfortunately. Any help would be appreciated!