title: how to print array in a component - ReactJS
body: <p>this is the code of the StoryCreator</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  
  import { Helmet } from 'react-helmet'
  import { connect } from 'react-redux'
  import { Layout, Row, Col, Form, Input, Button, Divider, message, Icon, AutoComplete } from 'antd'
  import { Link } from 'react-router-dom'
  import ErrorPopover from '../../components/ErrorPopover/ErrorPopover'
  import { success } from '../../services/story.services'
  
  import { changeStoryTitle, changeStoryContent , changeStoryBody, changeStoryImage, changeStoryCategoryid, sendStory } from '../../actions/story.actions'
  import { fetchCategories } from '../../actions/category.actions'
  
  import '../../vendor/Shadow/Shadow.css'
  import '../../vendor/Radius/Radius.css'
  import './StoryCreator.css'
  
  const { Content } = Layout
  const FormItem = Form.Item
  const { TextArea } = Input;
  const onload = () =&gt; {
    const hide = message.loading('Cargando entrada..');
  };
  
  class StoryCreator extends React.Component {
  
    componentWillMount() {
      this.props.dispatch(fetchCategories())
    }
  
    constructor (props) {
      super(props)
    }
  
    handleChange = (e) =&gt; {
      if(e.target.id === 'storyTitle') {
        this.props.dispatch(changeStoryTitle(e.target.value))
      }
    }
  
    handleChangeContent = (e) =&gt; {
      if(e.target.id === 'storyContent') {
        this.props.dispatch(changeStoryContent(e.target.value))
      }
    }
  
    handleChangeBody = (e) =&gt; {
      if(e.target.id === 'storyBody') {
        this.props.dispatch(changeStoryBody(e.target.value))
      }
    }
  
    handleChangeImage = (e) =&gt; {
      if(e.target.id === 'storyImage') {
        this.props.dispatch(changeStoryImage(e.target.value))
      }
    }
  
    handleChangeCategoryid = (e) =&gt; {
      if(e.target.id === 'storyCategoryid') {
        this.props.dispatch(changeStoryCategoryid(e.target.value))
      }
    }
  
    handleSubmit = (e) =&gt; {
      e.preventDefault()
  
      let storyTitleVal = this.props.storyTitle
      let storyContentVal = this.props.storyContent
      let storyBodyVal = this.props.storyBody
      let storyImageVal = this.props.storyImage
      let storyCategoryidVal = this.props.storyCategoryid
  
      if (!storyTitleVal) {
        this.storyTitleInput.focus()
        return
      }
  
      this.props.dispatch(sendStory(storyTitleVal, storyContentVal, storyBodyVal, storyImageVal, storyCategoryidVal), onload)
    }
  
    render () {
  
      const {categories} = this.props;
      const data = categories;
  
      function Complete() {
        return (
          &lt;FormItem style={{marginTop: '-10px'}} label='CATEGORY'&gt;
          &lt;AutoComplete
            style={{ width: 200 }}
            dataSource={data}
            placeholder="try to type `b`"
            filterOption={(inputValue, option) =&gt; option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
          /&gt;
          &lt;/FormItem&gt;
  
        );
      }
      return (
        &lt;div&gt;
          &lt;Form onSubmit={this.handleSubmit}&gt;
            &lt;FormItem label='TITLE'&gt;
              &lt;Input id='storyTitle' value={this.props.storyTitle} onChange={this.handleChange} ref={(input) =&gt; { this.storyTitleInput = input }} size='large' /&gt;
            &lt;/FormItem&gt;
  
            &lt;FormItem style={{marginTop: '-10px'}} label='CONTENT'&gt;
              &lt;Input id='storyContent' value={this.props.storyContent} onChange={this.handleChangeContent} ref={(input) =&gt; { this.storyContentInput = input }} size='large' /&gt;
            &lt;/FormItem&gt;
  
            &lt;FormItem style={{marginTop: '-10px'}} label='Body'&gt;
            &lt;TextArea rows={4} id='storyBody' value={this.props.storyBody} onChange={this.handleChangeBody} ref={(input) =&gt; { this.storyBodyInput = input }} size='large'  /&gt;
            &lt;/FormItem&gt;
  
            &lt;FormItem style={{marginTop: '-10px'}} label='IMAGE'&gt;
              &lt;Input id='storyImage' value={this.props.storyImage} onChange={this.handleChangeImage} ref={(input) =&gt; { this.storyImageInput = input }} size='large' /&gt;
            &lt;/FormItem&gt;
  
            &lt;FormItem style={{marginTop: '-10px'}} label='CATEGORY'&gt;
              &lt;Input id='storyCategoryid' value={this.props.storyCategoryid} onChange={this.handleChangeCategoryid} ref={(input) =&gt; { this.storyCategoryidInput = input }} size='large' /&gt;
            &lt;/FormItem&gt;
  
            &lt;Complete /&gt;
  
            &lt;Button onClick={onload} disabled={this.props.isBusy} style={{marginTop: '-10px'}} type='primary' size='large' htmlType='submit' className='shadow-1'&gt;
              Send
            &lt;/Button&gt;
          &lt;/Form&gt;
        &lt;/div&gt;
      )
    }
  
  }
  
  function mapStateToProps (state) {
    const { isBusy } = state.appReducer
    const { storyTitle, storyContent, storyBody, storyImage, storyCategoryid } = state.storyReducer
  
    return {
      isBusy,
      storyTitle,
      storyContent,
      storyBody,
      storyImage,
      storyCategoryid,
      categories
    }
  }
  
  const StoryCreatorConnected = connect(mapStateToProps)(StoryCreator)
  export default StoryCreatorConnected</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this one of the category.actions</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { CATEGORY_CHANGE_NAME, CATEGORIES_FETCHED, CATEGORY_DELETED } from "../constants/category.constants";
  import { showLoading, hideLoading } from 'react-redux-loading-bar'
  import { toggleBusy } from '../actions/app.actions'
  import { SaveCategory, GetCategories, DeleteCategory, UpdateCategory } from '../services/category.services'
  import { history } from '../helpers/history'
  
  export const deleteCategory = (id) =&gt; {
      return { type: CATEGORY_DELETED, id: id}
  }
  
  export const changeNameCategory = (name) =&gt; {
      return { type: CATEGORY_CHANGE_NAME, name: name}
  }
  
  export const sendCategory = (name) =&gt; {
      return dispatch =&gt; {
          dispatch(toggleBusy(true))
          dispatch(showLoading())
          SaveCategory(name)
          .then(
              response =&gt; {
                  dispatch(toggleBusy(false))
                  dispatch(hideLoading())
                  dispatch(changeNameCategory(''))
                  dispatch(fetchCategories())
              },
              error =&gt; {
                  dispatch(toggleBusy(false))
                  dispatch(hideLoading())
              }
          )
      }
  }
  
  export const updateCategory = (id, name) =&gt; {
      return dispatch =&gt; {
          dispatch(toggleBusy(true))
          dispatch(showLoading())
          dispatch(changeNameCategory(''))
          history.push('/admin/category')
          UpdateCategory(id, name)
          .then(
              response =&gt; {
                  dispatch(toggleBusy(false))
                  dispatch(hideLoading())
                  dispatch(changeNameCategory(''))
                  dispatch(fetchCategories())
              },
              error =&gt; {
                  dispatch(toggleBusy(false))
                  dispatch(hideLoading())
              }
          )
      }
  
  }
  
  export const destroyCategory = (id) =&gt; {
      return dispatch =&gt; {
          dispatch(toggleBusy(true))
          dispatch(showLoading())
          DeleteCategory(id)
          .then(
              response =&gt; {
                  dispatch(toggleBusy(false))
                  dispatch(hideLoading())
                  dispatch(fetchCategories())
              },
              error =&gt; {
                  dispatch(toggleBusy(false))
                  dispatch(hideLoading())
              }
          )
      }
  }
  
  
  export const fetchCategories = () =&gt; {
      return dispatch =&gt; {
          dispatch(toggleBusy(true))
          dispatch(showLoading())
          GetCategories()
          .then(
              response =&gt; {
                  console.log(response)
                  dispatch(toggleBusy(false))
                  dispatch(hideLoading())
                  dispatch(success(response.categories))
              },
              error =&gt; {
                  console.log(error)
                  dispatch(toggleBusy(false))
                  dispatch(hideLoading())
              }
          )
      }
  
      function success(categories) { return { type: CATEGORIES_FETCHED, categories: categories}}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>what it does is communicate with a service to be able to take all the loaded categories, the problem is that I can not put all those categories in a variable to be able to list them in an Autocomplete, I do not know how to load the array into a variable.</p>
  
  <p>The strange thing is that I could do it before in another component that lists all the categories. There I leave the code, I hope you can help me</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import {connect} from 'react-redux'
  import {
    Card,
    Alert,
    Icon,
    Button,
    Table,
    Divider,
    Popconfirm
  } from 'antd';
  import {Link} from 'react-router-dom'
  import {fetchCategories, destroyCategory, editCategory} from '../../actions/category.actions';
  const {Meta} = Card;
  
  
  class Categories extends React.Component {
    componentDidMount() {
      this.props.dispatch(fetchCategories())
    }
    handleDeleteCategory(e) {
      //var removedItem = fruits.splice(pos, 1);
      this.props.dispatch(destroyCategory(e.id))
    }
  
  
    render() {
      const {categories} = this.props;
      const data = categories;
  
      const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id'
        }, {
          title: 'Nombre de la categoria',
          dataIndex: 'name',
          key: 'name'
        }, {
          title: 'Acciones',
          key: 'action',
          render: (text, record) =&gt; (&lt;span&gt;
             &lt;Link to={`/admin/category/edit/${record.id}/${record.name}`}&gt;Editar&lt;/Link&gt;
            &lt;span className="ant-divider"/&gt;
            &lt;a onClick={() =&gt; this.handleDeleteCategory(record)}&gt;Eliminar&lt;/a&gt;
          &lt;/span&gt;)
        }
      ];
  
      if (this.props.categories.length == 0)
        return (&lt;Alert message="No hay categorias para mostrar." type="error"/&gt;);
  
      return &lt;Table dataSource={data} columns={columns}/&gt;
  
    }
  
  }
  
  function mapStateToProps(state) {
    const {categories} = state.categoryReducer
    return {categories}
  }
  
  const connectedCategories = connect(mapStateToProps)(Categories)
  export default connectedCategories</code></pre>
  </div>
  </div>
  </p>