Rendering an array map in React

Question

I am having a problem where I am trying to use array of data to render a  lt ul gt  element  In the code below the console log s are working fine  but the list items aren t appearing    var Main   React createClass     getInitialState  function        return         data  dataRecent               render  function        return          lt div gt           lt ul gt                         this state data map function item  i                console log  test                  lt li gt Test lt  li gt                                    lt  ul gt         lt  div gt                 ReactDOM render  lt Main   gt   document getElementById  app        What am I doing wrong  Please feel free to point out anything that isn t best practice

User · Answer

Using Stateless Functional Component We will not be using this state  Like this   data1 map  item key   gt                   return                  lt tr key  key  gt                   lt td gt  item heading  lt  td gt                   lt td gt  item date  lt  td gt                   lt td gt  item status  lt  td gt                 lt  tr gt

User · Answer

You are not returning  Change to  this state data map function item  i     console log  test      return  lt li gt Test lt  li gt

User · Answer

Add up to Dmitry s answer  if you don t want to handle unique key IDs manually  you can use React Children toArray as proposed in the React documentation React Children toArray Returns the children opaque data structure as a flat array with keys assigned to each child  Useful if you want to manipulate collections of children in your render methods  especially if you want to reorder or slice this props children before passing it down   Note  React Children toArray   changes keys to preserve the semantics of nested arrays when flattening lists of children  That is  toArray prefixes each key in the returned array so that each element   s key is scoped to the input array containing it     lt div gt       lt ul gt                  React Children toArray            this state data map  item  i    gt   lt li gt Test lt  li gt                          lt  ul gt     lt  div gt

User · Answer

I ve come cross an issue with the implementation of this solution   If you have a custom component you want to iterate through and you want to share the state it will not be available as the  map   scope does not recognize the general state   scope  I ve come to this solution      class RootComponent extends Component         constructor props                         this customFunction bind this           this state    thisWorks  false          this that   this            componentDidMount                            render            let array   this thatstate map      gt                 lt CustomComponent that  this that  customFunction  this customFunction   gt                        customFunction             this that setState  thisWorks  true              class CustomComponent extend Component        render             return  lt Button onClick       gt   this props customFunction               In constructor bind without this that Every use of any function method inside the root component should be used with this that

User · Answer

let durationBody   duration map  item  i    gt          return            lt option key  i  value  item  gt             item           lt  option gt

User · Answer

Dmitry Brin s answer worked for me  with one caveat  In my case  I needed to run a function between the list tags  which requires nested JSX braces  Example JSX below  which worked for me    this props data   map function  object  i    return  lt li gt  JSON stringify object   lt  li gt        If you don t use nested JSX braces  for example     this props data   map function  object  i    return  lt li gt JSON stringify object  lt  li gt       then you get a list of  JSON stringify object   in your HTML output  which probably isn t what you want

User · Answer

import React    Component   from  react    class Result extends Component         render                 if this props resultsfood status   found                 var foodlist   this props resultsfood items map name  gt                       return                         lt div className  row  key  name id   gt                      lt div className  list-group  gt                         lt a href     className  list-group-item list-group-item-action disabled  gt                      lt span className  badge badge-info  gt  lt h6 gt   name item  lt  h6 gt  lt  span gt                     lt span className  badge badge-danger  gt  lt h6 gt  Rs  name price    lt  h6 gt  lt  span gt                      lt  a gt                     lt a href     className  list-group-item list-group-item-action disabled  gt                     lt div className  alert alert-dismissible alert-secondary  gt                        lt strong gt  name description  lt  strong gt                         lt  div gt                     lt  a gt                   lt div className  form-group  gt                        lt label className  col-form-label col-form-label-sm  htmlFor  inputSmall  gt Quantitiy lt  label gt                       lt input className  form-control form-control-sm  placeholder  unit kg   type  text  ref  qty   gt                       lt div gt   lt button type  button  className  btn btn-success                        onClick      gt  this props savelist name item name price                       this props pricelist name price                       this props quntylist this refs qty value                                               gt ADD Cart lt  button gt                           lt  div gt                        lt br  gt                          lt  div gt                    lt  div gt                    lt  div gt                                                                  return    lt ul gt      foodlist   lt  ul gt                     export default Result

User · Answer

You are implicitly returning undefined  You need to return the element   this state data map function item  i     console log  test      return  lt li gt Test lt  li gt

User · Answer

Gosha Arinich is right  you should return your  lt li gt  element  But  nevertheless  you should get nasty red warning in the browser console in this case  Each child in an array or iterator should have a unique  quot key quot  prop   so  you need to add  quot key quot  to your list  this state data map function item  i     console log  test      return  lt li key  i  gt Test lt  li gt      or drop the console log   and do a beautiful oneliner  using es6 arrow functions  this state data map  item i    gt   lt li key  i  gt Test lt  li gt    IMPORTANT UPDATE  The answer above is solving the current problem  but as Sergey mentioned in the comments  using the key depending on the map index is BAD if you want to do some filtering and sorting  In that case use the item id if id already there  or just generate unique ids for it

[javascript] Rendering an array.map() in React

Examples related to javascript

Examples related to reactjs