Doing some really simple react rendering, no redux, no react-router, just a ReactDOM.render
on a div id inside the eex template. I’ve figured out how to pass information from react to phoenix like so:
handleSubmit = event => {
event.preventDefault()
var request = new XMLHttpRequest();
request.open('POST', '/sessions/sign_in', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(JSON.stringify({ email: this.state.email, password: this.state.password }));
}
I am having trouble passing information from phoenix to react though.
I am passing a list of categories through the controller to a template like so:
<%= for {:ok, categories} <- @categories do %>
<script>
var CATEGORIES = <%= Jason.encode(categories) %>
</script>
<% end %>
<div id="react-categories"></div>
how do I consume this variable within my react app? Is there a better way to be passing this around?
my component looks like:
import * as React from 'react';
import "./categories.css"
class Categories extends React.Component {
constructor() {
super();
this.state = {
showMenu: false,
}
this.showMenu = this.showMenu.bind(this);
}
showMenu(event) {
event.preventDefault();
this.setState({
showMenu: !this.state.showMenu,
});
}
render() {
return (
<div className="menu">
<button className="menu-button" onClick={this.showMenu}>
Menu
</button>
{
this.state.showMenu
? (
<div>
<ul className="menu-items">
<li className="menu-item"><button className="menu-item-button"> Menu item 1 </button></li>
<li className="menu-item"><button className="menu-item-button"> Menu item 2 </button></li>
</ul>
</div>
)
: (
null
)
}
</div>
)
}
}
export default Categories;