Using props without this?

functional-component
render-functions

#1

Hi all,

I am doing some tests with Vue, trying to create components like elm (for fun ¿?).

I created next component with success:

// STATE
const state = {
  active: false
};

// UPDATE
const toggle = () => (state.active = !state.active);

// VIEW
const view = h => (
  <div>
    <p>Active: {state.active.toString()}</p>
    <button onclick={toggle}>Toggle</button>
  </div>
);
export default {
  name: "HelloWorld",
  data: () => state,
  render: view
};

The problem is when I try to use props. I don’t find any way to get the props without this keyword.

Does anybody knows if it exist a way to get props?


#2

Don’t use an arrow function for your render function - then you can use this in the render function.

You could also mark the component as functional in which case it will get the props as part of the context in the second argument to the render function.