How do I obtain a value from JSON object in a React render function?

Question

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

---

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));
?>

Answer 1

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>

Answer 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