2

Summary

I'm attempting to make a blog using React with JSON data.

When I console.log(this.state.blogs) I receive the output of: [object Object],[object Object],[object Object].

I've tried to use the .map function but am unsure of how to with JSON data.

My key would be "blog_text" as that is how I'm encoding it back to React.

So far all I've been able to do is access different items in the object array by printing out this.state.blogs[0]. I'm unsure of how to apply the dot operator or .map function to this array. I've searched on Stack Overflow but it doesn't apply to the way I'm saving my JSON. Does anybody have a suggestions? Thank you in advance.


Google Chrome Console Output

Google Chrome Console Output


React LoginForm Class

var LoginForm = React.createClass({
    getInitialState: function() {
        return {
            username: 'alexa',
            password: '1234',
            blogs: {}
        };
    },
    componentDidMount: function() {
        ajax('obtain_blogs.php', null, function(response) {
            if (response.result === 'error') {
                alert('Error: ' + response.msg);
            } else if (response.result === 'success') {
                console.log("success");
                console.log("Response.blogtext: " + response.blogtext);
                console.log("Response.blogtext[0]: " + response.blogtext[0]);
                this.setState({ blogs: response.blogtext, loading: false});
                //this.props.getBlogs(response.blogtext);
            } else {
                alert("Response message has no result attribute");
            }
        }.bind(this));
    },
    onUsernameChange: function(e) {
        this.setState({ username: e.target.value });
    },
    onPasswordChange: function(e) {
        this.setState({ password: e.target.value });
    },
    onSubmit: function(e) {
        ajax('login.php', {username: this.state.username, password: this.state.password },
        function(response) {
            if (response.result === 'failure') {
                alert('Bad username or password');
            }
            else if (response.result === 'success') {
                this.props.onLogin(response.counter);
            }
            else if (response.result === 'error') {
                alert('Error: ' + response.msg);
            }
            else {
                alert('Response message has no result attribute.');
            }
        }.bind(this));

    },
    render: function() {
        var blog_entries = this.state.blogs.toString();
        console.log("Blog Entries: " + blog_entries);
        var key = "blog_text";
        console.log("this.state.blogs typeof: " + typeof(this.state.blogs));

        return (
            <div>
                <h1>Single Blog System</h1>
                <hr></hr>
                Username: <input type="text"     onChange={this.onUsernameChange} value={this.state.username} /> <br></br>
                Password: <input type="password" onChange={this.onPasswordChange} value={this.state.password} /> <br></br>
                          <input type="submit"   onClick={this.onSubmit}          value="Login" /> <br></br>
                <hr></hr>
                <h2>Blogs:</h2>
                <div>
                    {this.state.blogs}
                </div>

            </div>
        );
    }
});


Obtain_Blogs.php

<?php
    # update_click will connect to the database and then update the counter 
    # variable to the database.

    # Global Declaration for all "try" blocks to have access.
    $servername = "************";
    $dbusername = "************";
    $dbpassword = "************";
    $dbname = "************";
    $tablename = "************";

    # Checks the connection with the database.
    try 
    {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $dbusername, $dbpassword);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql= "SELECT blog_text FROM users";
        $stmt = $conn->prepare($sql);
        $json=json_encode($stmt);
        $stmt->execute();

        if ($stmt->rowCount() == 0){
            $response = array('error' => 'Did not find blogs');
            print(json_encode($response));
            exit();
        }
        $row = $stmt->fetchAll(PDO::FETCH_ASSOC);

    } catch(PDOException $e)
    {
        $response = array('result' => 'error', 'msg' => $e->getMessage());
        print(json_encode($response));
        console.log("my error. message is %s", $e);
        exit();
    }
    $response = array('result' => 'success', 'blogtext' => $row);
    print(json_encode($response));
?>

2 Answers 2

2

I would suggest to create a separate Component for a blog Entry and then do the following.

this.blogComponents = this.state.blogs.map((blogEntryObject, index)=>{return <BlogEntry blog={blogEntryObject}>});

and then replace the div under blogs by the blogComponents array. Inside the blogEntry Component you can get the the blogEntryObject via this.props.blog and in the render method you can specify how you are going to display the blog entry

Sign up to request clarification or add additional context in comments.

3 Comments

So should I include this.blogComponents = this.state.blogs.map((blogEntryObject, index)=>{return <BlogEntry blog={blogEntryObject}>}); in my LoginForm and then do the rest of the work in the blogEntry component?
map the data to blog component array, in the blogEntry component you will have access to the individual blog object that contain the 'blog_text' which you can display in the render method. To display your blog entries simply replace the last part in your loginForm to this <h2>Blogs:</h2> <div>{this.blogComponents}</div>
I tried going the route you specified but ultimately wasn't sure where to put: this.blogComponents = this.state.blogs.map((blogEntryObject, index)=>{return <BlogEntry blog={blogEntryObject}>});. Instead I altered my componentDidMount in a similar fashion. The only problem is that I'm getting a list of objects instead of elements. {var blog_element_list = []; this.state.blogs.map(function(blogEntryObject, index) { blog_element_list.push(<li><input type="submit" value={blogEntryObject} /></li>)}); this.setState({blogComponents: blog_element_list});
0

Try this!

<div>
    <h1>Single Blog System</h1>
        <hr></hr>
        ...
        <hr></hr>
        <h2>Blogs:</h2>
        <div>
            {
               this.state.blogs.map(ele => {
                   return ele.blog_text;
               }
            }
        </div>

</div>

1 Comment

I'm getting: index.jsx:97 Uncaught TypeError: this.state.blogs.map is not a function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.