如何使用自定义结果值在textarea中呈现json数据

Question

我的问题基于这个link，我想在textarea中使用自定义结果值渲染json数据。

代码：

import React from 'react';
import { render } from 'react-dom';

const data = [
  {
    name: "peter",
    location: "boston"
  },
  {
    name: "john",
    location: "florida"
  }
]

class App extends React.Component {
  render() {
    return (
      <div>
        <textarea value={data.map(e => JSON.stringify(e).replace(/{|}/g, '')).join('\n')} rows='3' cols='30' />
      </div>
    )
  }
}

render(<App />, document.getElementById('root'));

结果：

如果我期望结果只是json值并在第一个和第二个值之间添加一个字符串'at'，如下图所示？

Answer 1

您可以使用template literals在map内合并每个对象的两个属性，如下所示：

const text = data
  .map(item => `${item.name} at ${item.location}`)
  .join('\n')

以下是CodePen

的工作示例