React - list element text not getting displayed

Question

I'm creating a simple todo app in react. I have three components. The component in charge of displaying the items ('Item' component) is displaying the bullets but not the text. Here's my code, (edit)

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { list: [] };
    this.addItem = this.addItem.bind(this);
  }

  addItem(val) {
    let updated = [...this.state.list, val];
    this.setState({ list: updated });
  }

  render() {
    return (
      <div className="App">
        <Title itemCount={this.state.list.length}></Title>
        <Add addItem={this.addItem}></Add>
        <Items items={this.state.list}></Items>
      </div>
    );
  }
}

//Items.js
const Items = ({ items }) => {
  return (
    <div className="Items">
            <ul>{items.map((item, index) => 
                <li key={index}>
                    {item.text}
                </li>
            )}
            </ul>
        </div>
  );
};

edit 2: Here's an image:

How can I make it display the text? Thanks in advance!

Multiline JSX needs to be wrapped into braces - either format .map(.. return statement as single line or wrap JSX part into () — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Oct 2, 2020 at 21:55
did you make sure your items have a text field? maybe the problem is in the Add component — diedu
– diedu, Commented Oct 2, 2020 at 21:56
print the list after adding an item so that we can see the list, to print it you can do this, replace setState in addItem to this this.setState({ list: updated }, () => console.log(this.state.list)); — Ali Abu Hijleh
– Ali Abu Hijleh, Commented Oct 2, 2020 at 22:03

Ali Abu Hijleh · Accepted Answer · 2020-10-02 22:09:56Z

3

I can see that the list doesn't have a text property, so here's the fix:

const Items = ({ items }) => {
  return (
    <div className="Items">
            <ul>{items.map((item, index) => 
                <li key={index}>
                    {item}
                </li>
            )}
            </ul>
        </div>
  );
};

edited Oct 2, 2020 at 22:09

answered Oct 2, 2020 at 22:05

Ali Abu Hijleh

5023 silver badges10 bronze badges

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

Comments

Cyber · Accepted Answer · 2020-10-02 22:05:38Z

1

In your code:

{items.map((item, index) => 
  <li key={index}>
    {item.text}
  </li>
)}

the destructed item doesn't have a property called text, The item is carrying your text in this case. So you just need to remove .text change your code to this.

<li key={index}>
    {item}
</li>

answered Oct 2, 2020 at 22:05

Cyber

1618 bronze badges

Collectives™ on Stack Overflow

React - list element text not getting displayed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related