Tag: react

Posted on

CSS styling alternating items, rows or columns using nth-child

The nth-child CSS psuedoclass allows you to apply a style to child elements in lists, such as <li> items or table <tr> rows or <td> cells.

I’ve been working on a React frontend client to a Sudoku puzzle solver which is deployed as am AWS Lambda. It’s easy to build a table of <input> fields, but how can you styles that alternate only every 3 elements?

nth-child is perfect for this. First, you can specify the repeating style every nth element, starting with a thick border every 3 <td> cells : nth-child(3n):

/* right border for every 3rd td */
 .sudoku-grid tbody tr td:nth-child(3n){
   border-right: 3px solid;
 }

This results in this:


To handle the first column, you can apply a style to a specific element only, with:

/* set 1st column left border */
 .sudoku-grid tbody tr td:nth-child(1){
   border-left: 3px solid;
 }

This gives:

Now similarly for the <tr> rows, every 3rd row:

 /* bottom border for every 3rd tr row */
 .sudoku-grid tbody tr:nth-child(3n){
   border-bottom: 3px solid;
 }

And 1st row, now we’re done!

/* top border for first row */
  .sudoku-grid tbody tr:nth-child(1){
    border-top: 3px solid;
  }
Posted on

AWS S3 error: “The bucket you are attempting to access must be addressed using the specified endpoint”

Most errors on AWS are explicit and self explanatory, but once in a while you run into something that tells you something went wrong, but not how to fix it.

When setting up an S3 bucket to serve a static website, I got this error being returned as 301s for referenced files:

<Error>
<Code>PermanentRedirect</Code>
<Message>The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.</Message>
<Endpoint>s3.amazonaws.com</Endpoint>
<Bucket>static</Bucket>
...
</Error>

If you click an object in a bucket and click the overview tab, you can get a URL direct to the object, for example:

To load a static site from S3 though, you need to use a URL referencing the bucket in the server name, so instead of this:

https://s3-us-west-1.amazonaws.com/react-sudoku-solver/index.html

You should use this:

http://react-sudoku-solver.s3-us-west-1.amazonaws.com/index.html

(I’m currently working on a React app as a Sudoku Solver – more on this later)

Posted on

Rendering arrays of Components with React

React doesn’t support the use of a for() loop in it’s render method. If you need to render a list of components based on data, one approach is to build a var representing the list of components in a helper function as described here.

Another approach is to use .map() to build an array of Components from an array of values, like this:

this.state.grid.map( (cell, index) => (
  <CellComponent key={index} value={this.state.grid[index]}
      onChange={this.handleChangeForArrayFields.bind(this, index)}/>
  )
)}

In this example, this.state.grid is an array containing values to map to each rendered value attribute on my Component. Each rendered element needs to be unique, so we add the key attribute, and set it to the index from each element that comes out of the map function.

I’ll look at the onChange handler in a followon post.

Posted on

React Flux Store: addChangeListener is not a function

Using React with Flux, you need to register a callback from your Component so that it can be called when the Store emits an event. For an ExampleComponent and ExampleStore, this might look like:

class ExampleComponent extends Component {

    constructor(props) {
        super(props);
    }

    componentWillMount(){
        ChatStore.on('change', this.handleUserNameChange);
    }
...
}

I’ve seen some examples where a helper function is declared in the Store that registers your Component as a listener, so the call from the Component to register with the Store might look like:

    componentWillMount(){
        ChatStore.registerChangeListener(this.handleUserNameChange);
    }

and in your ExampleStore you’ll declare registerChangeListener() (and similar to remove) like this:

addChangeListener(callback) {
    this.on('change', callback);
}

removeChangeListener(callback) {
    this.removeListener('change', callback);
}

All good so far, but here’s the issue I just ran into:

Uncaught TypeError: _ExampleStore2.default.addChangeListener is not a 
function
 at ExampleComponent.componentWillMount (ExampleComponent.jsx:19)
 at ReactCompositeComponent.js:348

Initially this is confusing, since it’s clear we did already declare addChangeListener, so why is this error saying it’s not a function?

The catch is in how we export the Store. The cause of my issue above was that I had exported it like this:

class ExampleStore extends EventEmitter {
..
}
export default ExampleStore;

This is how you would typically export a module but what we’re trying to do is treat the Store as a singleton instance. To do this the export should be:

export default new ExampleStore();

This approach is described in many Flux related articles (here’s an example), but it’s an easy mistake to miss.

Proudly powered by WordPress