undefined is not an object 'contentstate.blocks'

[JohnReyes-Dev]

I'm not sure what I did wrong.

Here is my code:

import getRNDraftJSBlocks from "react-native-draftjs-render";
import contentState from "./resourceMock.json";

export default class App extends Component {
  render() {
    const blocks = getRNDraftJSBlocks(contentState);
    return (
      <View style={styles.container}>
        <ScrollView style={{ flex: 1 }}>{blocks}</ScrollView>
      </View>
    );
  }
}

[raphaelpor]

Hello @RukaiJohn!

Could you please paste the resourceMock.json here?

[JohnReyes-Dev]

Hello :)

I got it from the resourceMock.json file that was in the sample/src folder. I'm just not understanding what exactly is "DraftJs/contentState" is?

{
  "blocks": [
    {
      "entityRanges": [],
      "depth": 0,
      "data": {},
      "inlineStyleRanges": [],
      "text": "Maecenas nec odio",
      "type": "header-one",
      "key": "ad9sdfdg5"
    },
    {
      "key": "5r867",
      "text": "Etiam ultricies nisi vel augue. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Cras dapibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 25,
          "length": 5,
          "style": "BOLD"
        },
        {
          "offset": 307,
          "length": 10,
          "style": "BOLD"
        },
        {
          "offset": 241,
          "length": 6,
          "style": "ITALIC"
        }
      ],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "3lkq2",
      "text": "Ma 🎤Iñtërnâtiônàlizætiøn☃💩 Etiama nia",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 2,
          "length": 35,
          "key": 0
        }
      ],
      "data": {}
    },
    {
      "key": "7noje",
      "text": "🎤 Etiama augue 'ultricie ultric'",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 1,
          "length": 31,
          "key": 0
        }
      ],
      "data": {}
    },
    {
      "key": "5r864123",
      "text": "Etiam ultricies nisi vel augue.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 0,
          "length": 5,
          "key": 0
        }
      ],
      "data": {}
    },
    {
      "key": "5r8641253",
      "text": "Etiam ultricies nisi vel augue vel augue vel augue.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 5,
          "style": "BOLD"
        }
      ],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "5r8641",
      "text": "Etiam ultricies nisi vel augue.",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 7,
          "length": 9,
          "style": "BOLD"
        },
        {
          "offset": 7,
          "length": 10,
          "style": "ITALIC"
        }
      ],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "3tvln",
      "text": "",
      "type": "atomic",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {
        "type": "image",
        "url": "https://lorempixel.com/400/200/"
      }
    },
    {
      "entityRanges": [],
      "depth": 0,
      "data": {},
      "inlineStyleRanges": [],
      "text": "Aenean leo ligula porttitor",
      "type": "header-two",
      "key": "c87fd"
    },
    {
      "entityRanges": [],
      "depth": 0,
      "data": {},
      "inlineStyleRanges": [],
      "text": "Morbi vestibulum volutpat",
      "type": "header-three",
      "key": "c9mft"
    },
    {
      "entityRanges": [],
      "depth": 0,
      "data": {},
      "inlineStyleRanges": [],
      "text": "Class aptent taciti sociosqu",
      "type": "header-four",
      "key": "ad9sdsdfdg5sd"
    },
    {
      "entityRanges": [],
      "depth": 0,
      "data": {},
      "inlineStyleRanges": [],
      "text": "Phasellus leo dolor",
      "type": "header-five",
      "key": "9p0ic"
    },
    {
      "entityRanges": [],
      "depth": 0,
      "data": {},
      "inlineStyleRanges": [],
      "text": "Donec vitae orci sed",
      "type": "header-six",
      "key": "bb6hf"
    },
    {
      "key": "2galv",
      "text": "Proin magna. Donec posuere vulputate arcu",
      "type": "ordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "2grlv",
      "text": "Proin magna. Donec posuere vulputate arcu",
      "type": "ordered-list-item",
      "depth": 1,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "2gelv",
      "text": "Proin magna. Donec posuere vulputate arcu",
      "type": "ordered-list-item",
      "depth": 1,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "cdsdj",
      "text": "Etiam feugiat lorem non metus",
      "type": "ordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "d725p",
      "text": " Curabitur at lacus ac velit ornare lobortis",
      "type": "ordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "3grlv",
      "text": "Proin magna. Donec posuere vulputate arcu",
      "type": "ordered-list-item",
      "depth": 1,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "3gelv",
      "text": "Proin magna. Donec posuere vulputate arcu",
      "type": "ordered-list-item",
      "depth": 1,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "c9mftj",
      "text": "Phasellus a est.",
      "type": "unordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "3alra",
      "text": "Fusce ac felis sit amet ligula pharetra condimentum",
      "type": "unordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "3hlra",
      "text": "Child",
      "type": "unordered-list-item",
      "depth": 1,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "3clra",
      "text": "Grantchild",
      "type": "unordered-list-item",
      "depth": 2,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "key": "cniqr",
      "text": "Suspendisse faucibus a quam loremipsum ligum purus",
      "type": "unordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 13,
          "length": 6,
          "style": "ITALIC"
        },
        {
          "offset": 5,
          "length": 30,
          "style": "STRIKETHROUGH"
        },
        {
          "offset": 16,
          "length": 9,
          "style": "BOLD"
        }
      ],
      "entityRanges": [
        {
          "offset": 12,
          "length": 8,
          "key": 0
        }
      ],
      "data": {}
    },
    {
      "key": "8cl9h",
      "text": "Suspendisse potenti. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Morbi vestibulum volutpat enim. Phasellus nec sem in justo pellentesque facilisis.",
      "type": "blockquote",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [],
      "data": {}
    },
    {
      "entityRanges": [],
      "depth": 0,
      "data": {},
      "inlineStyleRanges": [],
      "text": "'code-block': {\n  backgroundColor: '#cecece',\n  fontFamily: 'Courier New',\n  padding: 16,\n},",
      "type": "code-block",
      "key": "5aaa7ec3"
    }
  ],
  "entityMap": {
    "0": {
      "type": "LINK",
      "mutability": "MUTABLE",
      "data": {
        "url": "https://github.com/globocom/react-native-draftjs-render"
      }
    }
  }
}

[raphaelpor]

Your code seems correct. May be the path of your import is the problem here.

ContentState is the Draft.js data to be parsed by the getRNDraftJSBlocks funcion. It's the same name used by the Draft.js documentation: https://draftjs.org/docs/api-reference-content-state

[JohnReyes-Dev]

Thank you. Let me give a shot at it again. I'll let you know if there is anymore issues.

[fssantos]

@raphaelpor correct me if I'm wrong but I guess getRNDraftJSBlocks() argument must be an object isn't?

Like getRNDraftJSBlocks({contentState}) with brackets into.

[raphaelpor]

@fssantos Of course! 😄

@RukaiJohn Sorry for that, you have to call getRNDraftJSBlocks with an object.

Thank you! ❤️

[raphaelpor]

I'm closing this for now. Thank you guys!