React searching for a user and rendering it out

Question

FIXED: Solution: use this.props.name and add key value to

tag

I have some constant data that I am just trying to render to screen. I can render all of the data at once, but what I really want to do is search for a user and only render out their profile. I tried matching the obj.name with the this.state.name using ? : statement, but its always returning not found. I have my state name set to a name I know is in my data. Below is my entire file and data at the top so you can view everything I have going at the moment.

renderData works renderUser does not work (trying to get this to work)

import React, { Component, PropTypes } from 'react';



const tstProfileData = [
    {
        name: 'Sam', 
        email: 'smmschaefer@gmail.com',
        flavor: 'A very nice person',
        str: '50',
        agi: '55',
        int: '85',
        sta: '80'
    },

    {
        name: 'Ash', 
        email: 'ash@gmail.com',
        flavor: 'Direct person',
        str: '45',
        agi: '80',
        int: '85',
        sta: '75'
    }
]

class ProfileContainerRender extends Component {
    render() {

        const renderData = this.props.data.map( (objInner, index) => {
            return (<p key={index}>
                        Name: {objInner.name} < br/>
                        Email: {objInner.email} <br />
                        Flavor: {objInner.flavor} <br />
                        STR: {objInner.str} <br />
                        AGI: {objInner.agi} <br />
                        INT: {objInner.int} <br />
                        STA: {objInner.sta} <br />
                        </p>
            )
        });

        const renderUser = this.props.data.map( (obj, idx) => {
            return ( 
                    name === obj.name ? (
                        <p key={idx}>
                                Name: {obj.name} < br/>
                                Email: {obj.email} <br />
                                Flavor: {obj.flavor} <br />
                                STR: {obj.str} <br />
                                AGI: {obj.agi} <br />
                                INT: {obj.int} <br />
                                STA: {obj.sta} <br />
                            </p>
                    ) : (
                        <p>not found</p>
                    )
            )
        });

        return (
            <div>
                {renderUser}
            </div>
        )
    }
}

class ProfileContainer extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'Sam'
        }
    }

    findProfile(event) {
        //TODO: create a search method to bring back a 1 user result
    }

    render() {
        return (
            <div>
                //supplying ProfileContainerRender with the data and state name set to 'Sam'
                <ProfileContainerRender data={this.props.data} name={this.state.name}/>
            </div>
        )
    }
}

ProfileContainer.PropTypes = {
    data: PropTypes.arrayOf(
        PropTypes.object
    )
}

ProfileContainer.defaultProps = {
    data: tstProfileData
}


export default ProfileContainer;

Show source
| search   | reactjs   2017-01-04 22:01 2 Answers

Answers to React searching for a user and rendering it out ( 2 )

  1. 2017-01-04 22:01

    If this code is exact then it should be this.props.name === obj.name you have name === obj.name which points to the global name which is an empty string.

  2. 2017-01-04 22:01

    All the expression inside return with a view should be used with {} like this:

     {name === obj.name ? 
                            <p key={idx}>
                                    Name: {obj.name} < br/>
                                    Email: {obj.email} <br />
                                    Flavor: {obj.flavor} <br />
                                    STR: {obj.str} <br />
                                    AGI: {obj.agi} <br />
                                    INT: {obj.int} <br />
                                    STA: {obj.sta} <br />
                                </p>
                         : 
                            <p>not found</p>
                         }
    

Leave a reply to - React searching for a user and rendering it out

◀ Go back