Vfrdtyky

React Redux not displaying Map content data This code below works by posting form data to database.
My problem is that its not displaying the map content in the return method as per code below and its not showing any error
message in the console. Infact the map content is empty.

<ul>

    <h1>Jmarkatti </h1>

    {users.items4 && users.items4.map((user, index) =>

        <option key={user.uid} value='{ user.uid }'>Hey jmarkatti { user.filename} { user.uid }</option>

        )}

</ul>

Some Post here at Stackoverflow suggest ensuring that all the one doe not miss the returning statement
list.map not being displayed in React Component

here is the main code

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

import { connect } from 'react-redux';

import { uActions } from '../_actions';



class FileRegister extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            user: {

                firstName: '',

            },

            submitted: false

        };

        this.handleChange = this.handleChange.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this);

    }



    handleChange(event) {

        const { name, value } = event.target;

        const { user } = this.state;

        this.setState({

            user: {

                ...user,

                [name]: value,

            },

        });

    }



    handleSubmit(event) {

        event.preventDefault();

        this.setState({ submitted: true });

        const { user_upload } = this.state;

        const { dispatch } = this.props;

        if (user.firstName) {

            dispatch(userActions.register_upload(user));

        }

    }

    render() {

        const { user, users } = this.props;

        const { registering } = this.props;

        const { user, submitted } = this.state;

        return (

            <div className="col-md-6 col-md-offset-3">

                <ul>

                    <h1>Jmarkatti </h1>

                        {users.items4 && users.items4.map((user, index) =>

                        <option key={user.uid} value='{ user.uid }' >Hey jmarkatti {user.filename} {user.uid}</option>

                    )}

                </ul>

                <h2>Form submission</h2>

                <form name="form" onSubmit={this.handleSubmit}>

                    <div className={'form-group' + (submitted && !user.firstName ? ' has-error' : '')}>

                        <label htmlFor="firstName">First Name</label>

                        <input type="text" className="form-control" name="firstName" value={user.firstName} onChange={this.handleChange} />

                        {submitted && !user.firstName &&

                            <div className="help-block">First Name is required</div>

                        }

                    </div>

                    <div className="form-group">

                        <button className="btn btn-primary">Register</button>



                        <Link to="/login" className="btn btn-link">Cancel</Link>

                    </div>

                </form>



            </div>

        );

    }

}

Updates

function mapStateToProps(state) {

    const { registering } = state.users;



 const { users} = state;

 const { user} = state;









    return {

        registering,

user,

users





    };

}



const connectedFileRegister = connect(mapStateToProps)(FileRegister);

export { connectedFileRegister as FileRegister };

Here is the reducer.js

import { uConstants } from '../_constants';

export function users(state = {}, action) {

    switch (action.type) {

        case userConstants.REGISTER_REQUEST:

            return { registering: true };

        case userConstants.REGISTER_SUCCESS:

            return { items4: action.users };

        //return{};

        case userConstants.REGISTER_FAILURE:

            return {};

        default:

            return state

    }

}

The issue has been resloved in the dispatch() method as there was a mistake. Instead of userAction.users(), I wrote userAction.register_upload().
In a nutshell, it should be

dispatch(userActions.users(user));

not

 dispatch(userActions.register_upload(user));

If you look at second line of code at reducer.js posted above, you will discover export functions was set to users as per the code below

export function users(state = {}, action) {

Map content is working now. Between Thanks everyone

The way you iterate users.items4 will not return <option> items as you expected. Change them to

{users.items4 && users.items4.map((user, index) => (

  <option key={user.uid} value={user.uid} >Hey jmarkatti {user.filename} {user.uid}</option>

))}

or

{users.items4 && users.items4.map((user, index) => {

  return <option key={user.uid} value={user.uid} >Hey jmarkatti {user.filename} {user.uid}</option>

})}