score:17
Accepted answer
i don't think the warning has anything to do with the issue but just to get rid of it you can add the key prop in the react component like this:
var posts = react.createclass({
render: function() {
var createitem = (p) => (
<div classname="row" key={p.id}>
{p.post_type}
{p.foobar}
{p.user.name} //this does not work
</div>
);
return (
<div classname="panel">
{this.props.posts.map(createitem)}
</div>
);
}
});
as for the real issue, please try changing the assignment of @posts
to something like @posts = post.all.includes(:user).as_json(include: { user: { only: [:name] } })
my guess is that you are just querying the posts. by default as_json
(the method called when you return json data) does not include associations, therefore you won't get anything on the react side.
Source: stackoverflow.com
Related Query
- How Does ReactJS Handles Rails Active Record Associations
- Rails API how do I send the active record validation error?
- How to call internal API from Rails view (for ReactJS prerender purpose)?
- How to add active class to clicked item in ReactJS
- How to avoid reactjs to be included twice in a rails and reactjs environment?
- How does SEO play into the ReactJS page changes
- How does ReactJS evaluate any JavaScript Expression inside JSX?
- How does one select all child components (not DOM elements) used in a Reactjs component template?
- How to have a separated js file that handles the API calls in Reactjs
- ReactJS semantic ui Loader: how to toggle active
- basic explain for what does npm start do with my reactjs code and how to run it from browser
- How to return 404 status code when URL does not match at ReactJS
- How can i change className to active on li on exact route in reactJS
- How does render work in ReactJS with those HTML tags being "returned"
- Reactjs setState() does not immediately mutate this.state, How should I fix it?
- How does reactjs remove the comment from the UI on error in the tutorial
- How to have a separated file in js that handles the API response in Reactjs
- ReactJS - How does one delete a button component, that was just clicked?
- How does this code work with reactJs
- How to define component instance attributes with ReactJS and Typescript? `Property 'var' does not exist on type 'App'`
- How to alert a Selected Record using Reactjs
- ReactJS - firebase how query a record with particular .key
- How to set up ReactJS in Rails without using preexisting gems
- how to apply color to active link and remove from other link in reactjs
- How does currying work in ReactJS with setState hook?
- How to test a ReactJS function which uses hooks and does not return JSX
- How does react hooks handles callback when it sets the state?
- How can we skip a record while looping through an array in ReactJS
- How to pass parameters from root html element to ReactJS from Ruby on Rails app
- How does one deploy a ReactJs component that imports its own stylesheets?
More Query from same tag
- React update state hook on functional component does not allow dot notation
- How to fetch data and setState when prop changes in React?
- ReactJS: Accessing object inside state and updating it
- TS types for rows in custom re-usable table component
- TextInput flickering/choppy behaviour on render
- I’m trying to save data on the database but it is saving each input change
- Weather App with React, Prop not receiving and updating
- Can I set onClickevents that are not yet defined?
- how to pass json body as String in FETCH PUT API in react js
- TypeError: Cannot destructure property 'name' of 'e.target' as it is undefined. with DatePicker in React Hooks
- React JW player how to get current duration of video?
- history.push to /login (on logout) is not working in react-router-dom
- Select Tag for React Updation , trying to display Default Value and Changed Values for Select Tag in React
- how to show custom confirmation alert in loop for react JS?
- React Js, Template Not Provided On npx create-react-app <app name>
- Is there a way to refactor variables with similar names?
- react scroll to component
- How to Pass Id correctly to Rest API Endpoint from React
- React not updating data on parent component after child component form submit
- How to access property of suggestions coming from my AutoSuggest ( custom made using .filter() )
- Optimize css with less loop?
- Clear state on selecting dropdown
- React onClick not firing inside map generated list
- Hide keyboard in react-native
- Use fetch data from papaparse
- snapshots not being created at first test run
- nextjs - pass image as props to be used with next/image
- How to pass props to route in react router v5 with Typescript?
- firebase not loading data unless uid is hardcoded
- Compare values from two arrays and generate a new one