score:40
you can paste authenticity_token
into react component.
using gem react-rails
= react_component 'form', authenticity_token: form_authenticity_token
form_authenticity_token
is the rails helper.
so you can paste it into your form.
<form role='form' accept-charset="utf-8" action='/action' method='post'>
...
<input type='hidden' name='authenticity_token' value={this.props.authenticity_token} />
...
</form>
it's not the best solution. i would be happy if someone will tell a better solution.
score:1
you can render your form inside an invisible block and then clone it into a react component
/* app/assets/stylesheets/users.scss */
.invisible-form-container {
display: none;
}
# app/views/users/edit.html.haml
.invisible-form-container
= render 'form'
.react-container
# app/assets/javascripts/components/form.js.jsx.coffee
class @form extends react.component
html_form: ->
{__html: $('.invisible-form-container').html()}
render: ->
`<div dangerouslysetinnerhtml={this.html_form()} />`
# app/assets/javascripts/initializer.coffee
$ ->
reactdom.render(
`<form />`,
$('.react-container')[0]
)
hope this helps.
score:8
if you render the base html with rails and embed a react component to it with react-rails
, you can write like this:
var yourform = react.createclass({
render: function() {
var csrftoken = $('meta[name=csrf-token]').attr('content');
return (
<form action='/users' method='post' accept-charset='utf-8'>
<input type='hidden' name='_method' value='patch' />
<input type='hidden' name='utf8' value='✓' />
<input type='hidden' name='authenticity_token' value={csrftoken} />
...
</form>
);
}
});
score:13
you can do something like this:
$(document).ready(function(){
$.ajaxsetup({
headers: {
'x-csrf-token': $('meta[name="csrf-token"]').attr('content')
}
});
});
and put the csrf-token
into a meta tag inside your view/layout if it isn't already there.
Source: stackoverflow.com
Related Query
- How to create forms with React and Rails?
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to determine the order of css in my create react app build with webpack and customize-cra?
- How can I get a full working example with React 0.14 and Typescript 1.6.2 and Rails 4.2
- How to Create a dropdown Button with see more option and on click toggle should not happen in react js?
- REACT: How to create a reusable custom hook with functions and effects that can change & react to changes in a host component's data
- How to dynamically create and render JSX elements, defined from this.props with react
- How to create sticky header with flexbox and REACT
- How to deploy React front end + Rails api backend with nginx, capistrano and passenger
- How to Create 3(country,state and city) dropdowns that populates data with each other in react js
- How to create a generic arrow function with react and typescript
- How to create a new page and route programatically in React.js with React Router
- How to create a dynamic, custom React Table Component with action and status buttons
- How to Create global styles with Styled components in react and next js and is it better to use combination of css files and styled component?
- How to create a local react library project with common components, and import that project locally
- How to create multiple swiper instance in a react component and control one with the swipe of another?
- How to create a signup form with React and Why won't a function be executed when called insight a form after input field?
- I create a build of my react app and connected with electron.js. now how to connect my backend from server folder with electron
- How create React Typescript component with required and optional values but required value without default value?
- How to create a div with arrow and divider for content such that they are aligned using react and css?
- How to create an excel file in react js with custom headings and styles while doing export to excel?
- How to create bootstrap toggle buttons with React and Redux Form?
- How to create a form with text and file input in react and send form data to server using Nodejs?
- How to create a typeahead menu in React and populate it with options from an Postgresql table?
- How to create an input formfield with button that uploads a file using react and javascript?
- How to map through array of objects and create a new array of objects with a new added property using react and javascript?
- How to create a ref to child component, store it in context and pass it to a sibling in React with Material UI
- How to create floating image transition with css and react
- How do I create image maps (clickable areas on an image using <map >) with React and JSX?
- How to create module with react components and load with react lazy?
More Query from same tag
- Principles for vertical scrolling through SVG elements so it looks parallax?
- reactjs ES6: Unable to understand the syntax
- Correct way to share functions between components in React
- react style background css property
- Typescript subtracted type
- How to send a state into child component as dataset of D3.js object?
- Multiple providers and Router in React hooks
- Difference between React.useCallBack, React.useMemo and React.Memo with examples?
- When I use outlet in accordion, axios request in useEffect keeps executing
- Next-Auth: Cannot read property 'Adapter' of undefined
- displaying upload preview and stopping auto upload with dropzone react
- How to set a state of an array of object inside an array of objects in react
- How to set different font for different language by using i18next?
- Keep URL and state when working with filter drop-downs using react hook
- How to mock an asynchronous function call in another class
- Chart .js Method is not implemented
- Google-map-react - reactjs: How to dynamically show pop-up window after clicking on a marker
- I'm having trouble with react-datepicker position
- React-Router redirect after auth I'm getting infinite loop of renders
- Local Storage - React Native
- how do I display different data by clicking two buttons in react?
- Adding orientation in media query in MUI
- How can I validate a propType shape with dynamic keys and values already defined by another propType interface?
- If statement into useEffect hooks - ReactJs
- Is it necessary to pass 'passHref' to NextJS <Link> having a Semantic UI React as its child component?
- React Router DOM - Not working in sub to subdomain
- Wrong onChange event validation in React component
- How to get type of one specific prop of a react component?
- React do not render new components, new webpack setup
- How to make html code as a variable and use it?