React redux not showing the map content

Question

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
    }
}

can you add code as well where you are connecting your component with redux connect ? — Pranay Tripathi, Nov 16 '18 at 22:02
@Pranay, I have added the connecting components. Please can you look into it in the update sections — jmarkatti, Nov 17 '18 at 06:49
Why do you do `const { users} = state; const { user} = state;`. Just do: `const { users, user } = state`; — Blue, Nov 17 '18 at 06:50
@Frankez I have done that yet Map content is not showed. and there is no error message in the console — jmarkatti, Nov 17 '18 at 06:55

score 0 · Accepted Answer · answered Nov 17 '18 at 10:07

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

score -1 · Answer 2 · answered Nov 17 '18 at 05:02

-1

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>
})}

answered Nov 17 '18 at 05:02

Rico Chen

2,260
16
18

Yes it does. If you don't include curly brackets at the start of an arrow function, anything encapsulated is returned. – Blue Nov 17 '18 at 06:49
You are right @FrankerZ. Should've tested before posting. – Rico Chen Nov 17 '18 at 14:38

React redux not showing the map content

2 Answers2