В чем ошибка reactJS JSON?

Question

[Felino]

function Comment(props) {
        return (
            <div >
                {props.General.firstName}
                {props.General.FirstName}
                {props.General.LastName}
            </div>
        );
    }

    var comment = JSON.parse('[{\n' +
        '    general": {\n' +
        '      "firstName": "Liana",\n' +
        '      "lastName": "Crooks",\n' +
        '      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"\n' +
        '    },\n' +
        '    "job": {\n' +
        '      "company": "Ledner, Johnson and Predovic",\n' +
        '      "title": "Investor Functionality Coordinator"\n' +
        '    },\n' +
        '    "contact": {\n' +
        '      "email": "[e-mail]",\n' +
        '      "phone": "[phone]"\n' +
        '    },\n' +
        '    "address": {\n' +
        '      "street": "1520 Zemlak Cove",\n' +
        '      "city": "New Devon",\n' +
        '      "zipCode": "42586-7898",\n' +
        '      "country": "Guinea-Bissau"\n' +
        '    }\n' +
        '  },\n' +
        '  {\n' +
        '    "general": {\n' +
        '      "firstName": "Deontae",\n' +
        '      "lastName": "Dare",\n' +
        '      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/andysolomon/128.jpg"\n' +
        '    },\n' +
        '    "job": {\n' +
        '      "company": "D\'Amore, Dicki and Borer",\n' +
        '      "title": "International Applications Consultant"\n' +
        '    },\n' +
        '    "contact": {\n' +
        '      "email": "[e-mail]",\n' +
        '      "phone": "1-615-843-3426 x600"\n' +
        '    },\n' +
        '    "address": {\n' +
        '      "street": "65901 Glover Terrace",\n' +
        '      "city": "Alden ton",\n' +
        '      "zipCode": "57744-4248",\n' +
        '      "country": "Kenya"\n' +
        '    }\n' +
        '  }]')

     console.log(comment)

    ReactDOM.render(
        <Comment
            General={comment.general}
            Job={comment.job}
            Contact={comment.contact}
            Adress={comment.address}/>,
        document.getElementById('root')
    );

Comments

[Роман Александрович]

выложите код на jsfiddle.net

Answer 1

[0xD34F]

Кривой json - проверьте кавычки вокруг ключа во второй строке.
Компонент Comment - судя по имени и по коду, он должен рендерить один комментарий, а у вас массив. Наверное, тут нужен ещё один компонент - список комментариев.

const Comment = ({ general, job, address }) => (
  <li>
    <div>first name: {general.firstName}</div>
    <div>last name: {general.lastName}</div>
    <div>company: {job.company}</div>
    <div>address: {address.country}, {address.city}, {address.street}</div>
  </li>
);

const CommentList = ({ comments }) => (
  <ul>
    {comments.map(n => <Comment {...n} />)}
  </ul>
);

ReactDOM.render(
  <CommentList comments={comments} />,
  document.getElementById('root')
);

Answer 2

[Антон Спирин]

Учитесь читать ошибки в консоли.
Unexpected token g in JSON at position 4
У вас JSON не валидный.
Как минимум в первом же ключе general отсутствует открывающая кавычка.

Зачем вам вообще понадобилось определять данные строкой на клиенте и парсить?
Если вам, прям, так хочется совершать, эти бессмысленные операции, то пишите лучше так:

const json = JSON.stringify([
  {
    general: { /* ... */ },
    /* ... */
  },
  /* ... */
]);

const comments = JSON.parse(json);

так будет и читаемей, и меньше шансов ошибиться, а главное можно быстро и легко выпилить бессмысленную часть кода.