How to hide elements the reactjs way

Leave a comment

My first attempt at hiding a react-bootstrap tool tip was pretty naive. I wrapped it in a div.

1.png
Grabbed it directly from the DOM. And then made it’s display: none.

2.png

This worked. But it’s not the react way to do things. Instead we want to control the hiding of the element with a property, and then have the element display or hide itself on the state of that property.

So first add some state.

1.png

Then define an event handler to handle the state change.

2.png

Then hook it up in your constructor

3.png

Then define a style variable that will render itself depending on the state of your component. And then use it in your render.

4.png

The thing with remember with react is you never want to directly touch the DOM. Let react do that for you. Instead define states and properties, and manipulate them through handlers.

Here’s the whole solution using a react-bootstrap tooltip.

 

5.png

Thanks to Kelvin for his help and guidance in solving this.

Advertisements

How to setup bootstrap reactjs

Leave a comment

Create a new react app

create-react-app setup-bootstrap
cd setup-bootstrap

Install bootstrap

npm install --save bootstrap

Use it

<button type="button" class="btn btn-primary">Primary</button></code>

Capture.PNG

npm start

See it

Capture.PNG

https://stackoverflow.com/questions/40037657/how-to-include-bootstrap-css-and-js-in-reactjs-app

How to set state and pass as property reactjs

1 Comment

Say we have some state in our application username and we want to pass it as a property to a subcomponent. Here is how you do it.

  1. Define the state you want to pass in your parent.

1.png

  1. Pass it to your child component

2.png

  1. Use it in your child

3.png

Here is the entire example.

 4.png

5.png

How to setup simple img reactjs

Leave a comment

Here is how you can create a new Header component that links to an image in your reactjs project.

Create an assets dir and stick your image in there.

1.png

Then create a layouts dir and stick your new component in there.

2.png

Then call your new component from your main app.

3.png

Handling events and callbacks in ReactJS

1 Comment

https://facebook.github.io/react/docs/thinking-in-react.html

So I have been studying ReactJS that last couple weeks. Mostly banging my head trying to come up with simple examples. Here is one based on Thinking in React that demos how to do callbacks.

Starting simple

Here is a simple bit of code that counts words.

Screen Shot 2017-09-01 at 8.44.25 AM.png

Note the main component is called ‘WordCount’, and it does a fine job of counting words.

Adding composition and parent callbacks

But what I want to do is create a sub-component, maintain the state in the parent component, and have the parent component pass it’s callback down to the subcomponent so it can be called back.

Here is what I got working.

Screen Shot 2017-09-01 at 8.47.15 AM.png

Note the following.

  1. Child calls parent callback

I don’t know if this is common, or even necessary, but based on the Thinking in React example this is what they do.

You define your parent callback like so

Screen Shot 2017-09-01 at 8.49.31 AM.png

And then you pass it to your child like so:

Screen Shot 2017-09-01 at 8.50.04 AM.png

Note the name pattern. ‘onSomething’ ‘handleSomething’. This I have seen in many examples and this seems common.

But then in the child you define another similar callback, and have it do nothing more than prep the data and call the parent.

Screen Shot 2017-09-01 at 8.51.20 AM.png

I don’t know what you would do this. I guess if you wanted to do some more processing (you know the saying about always adding another layer of indirection).

And then you use this child callback locally which in turn calls the parent callback we just defined.

Screen Shot 2017-09-01 at 8.53.06 AM.png

This works. I am just not sure if it’s right or needed.

What I would have expected to be able to do, is just pass the parent callback directly to the child component itself.

But I haven’t been able to figure out how to do that yet. Stay tuned…

How to pass anonymous arrow functions ReactJS

1 Comment

You define the callback like this

Screen Shot 2017-08-31 at 8.31.52 AM.png

You pass it using the arrow functions like this

Screen Shot 2017-08-31 at 8.32.28 AM.png

You set it’s parameter values like this:

Screen Shot 2017-08-31 at 8.35.38 AM.png

You pass it to other components and functions like this

Screen Shot 2017-08-31 at 8.33.10 AM.png

And you add it to your controls like this

Screen Shot 2017-08-31 at 8.33.43 AM.png

ReactJS example using callback with User

Leave a comment

https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36

Here is a simple example that showing the plumbing for a ReactJS app using a callback.

Screen Shot 2017-08-30 at 10.10.22 AM.png

import React from 'react';
import { render } from 'react-dom';

class User extends React.PureComponent {
  render() {
    const {name, onDeleteClick } = this.props
    console.log(`${name} just rendered`);
    return (
      <li>             
        <input 
          type="button" 
          value="Delete" 
          onClick={onDeleteClick} 
        /> 
        {name}
      </li>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { id: 1, name: 'Cory' }, 
        { id: 2, name: 'Meg' }, 
        { id: 3, name: 'Bob' }
      ]
    };
  }
  
  deleteUser = id => {
    this.setState(prevState => {
      return { 
        users: prevState.users.filter( user => user.id !== id)
      }
    })
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        <ul>
        { 
          this.state.users.map( user => {
            return <User 
              key={user.id} 
              name={user.name} 
              onDeleteClick={() => this.deleteUser(user.id)} />
          })
        }
        </ul>
      </div>
    );
  }
}

export default App;

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

Older Entries

%d bloggers like this: