How can I set state when calling component?

Question

I'm very new to react, and got a bit stuck already. I've made a component for an Article Topper that's repeated many times across the site. It has a logo, a title, and a few share buttons and just sits above the article with the name of the article.

What I want to do is update the title name when I call the component, as each article will have a different name.

  constructor(props) {
    super(props);

    this.state = {
      topper: []
    };
  }

  render() {
    return (
      <div className="articletopper">
        <div className="left-cell">
          <p>
            <img
              className="logo"
              alt=""
              src={require("../images/logo.png")}
            />
            {this.state.topper}
          </p>
        </div> ...

Then in the actual page I want to call this and update the topper state.

  render() {
    return (
      <div className="Team">
        <Articletopper>Title of Article?</Articletopper>
      </div> 
    );
  }
}

I am aware you are not supposed to update state when you call a component, just wondered if there was a way. The purpose of this is just to make the code cleaner when creating a new article.

Thanks in advance for any help.

EDIT: Thanks for the responses, sorry if I wasn't clear. I want to update the title of the article without pasting tons of html each time. I think I need to use props based on what other people have said. For example I want to do:

<ArticleTopper> Article 1 Title </ArticleTopper>
<p> Article1... </p>
<ArticleTopper> Article 2 Title </ArticleTopper>
<p> Article2... </p>

and so on...

I don't think I understand what you are trying to do. Could you explain it better? Maybe with more code and examples... — Bruno Monteiro, Nov 28 '19 at 23:34
Possible duplicate of [How do you set the document title in React?](https://stackoverflow.com/questions/46160461/how-do-you-set-the-document-title-in-react) — Emile Bergeron, Nov 28 '19 at 23:36
If I understand your question properly, you have a component and that is being called in many places. But you want some part of the component to be customizable. You could use `props` for this purpose — ChandraKumar, Nov 28 '19 at 23:38
Oups, I think I misread at first the title of the page, not a header component. Anyway, here's another way: [use the `children` prop](https://stackoverflow.com/q/49706823/1218980). — Emile Bergeron, Nov 28 '19 at 23:39
You don't need `state` for this at all. As was already pointed out, you can simply pass a prop: `` then add `{this.props.title}` to your JSX. — , Nov 28 '19 at 23:45
Hi thanks for the replies, updated post with a bit more clarity. I think Props is what I need. — James Berryman, Nov 29 '19 at 08:20
I'm using version "react": "^16.12.0", if that helps. Still having trouble working this out. — James Berryman, Nov 29 '19 at 20:20

score 0 · Answer 1 · answered Nov 28 '19 at 23:53

0

You can initialize the state by props while constructing.

If the title you give the component can vary over time，you may need to ask lifecycle method componentDidUpdate for help.

answered Nov 28 '19 at 23:53

Singhi John

307
2
10

score 0 · Answer 2 · answered Dec 02 '19 at 18:21

So I was just overcomplicating the whole thing.

  render() {
    return (
      <div className="articletopper">
        <div className="left-cell">
          <p>
            <img
              className="dragonball"
              alt=""
              src={require("../images/dragonball.png")}
            />
            {this.props.title}
          </p>
        </div>

Just needed this.props.title where I wanted the Article Title to be. And then...

import Articletopper from "../articletopper/articletopper";

class Team extends React.Component {
  render() {
    return (
      <div className="Team">
        <Articletopper title={"Hello"}></Articletopper>
      </div>
    );
  }
}

export default Team;

As I said, still very new to this and I overthought what I wanted to do! Didn't need state, just props!

How can I set state when calling component?

2 Answers2