React - Component stored as variable not rendered in nested component

Question

I have the following components:

InfoDisplayer:

import React, { Component } from "react";
import Typing from "react-typing-animation";

import AnimeInfo from "./animeInfo";
import OtherInfo from "./otherInfo";

const infos = [AnimeInfo, OtherInfo];

export class InfoDisplayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
    };

    this.updateDisplayedInfo = this.updateDisplayedInfo.bind(this);
  }

  updateDisplayedInfo = () => {
    const newState = {
      currentIndex: this.state.currentIndex,
    };
    if (this.state.currentIndex === infos.length - 1) {
      newState.currentIndex = 0;
    } else {
      newState.currentIndex++;
    }
    this.setState(newState);
  };

  render() {
    const Info = infos[this.state.currentIndex];
    return (
      <React.Fragment>
        <Info />
        <Typing onFinishedTyping={this.updateDisplayedInfo} loop>
          <Info />
          <Typing.Reset count={1} delay={2000} />
        </Typing>
      </React.Fragment>
    );
  }
}

export default InfoDisplayer;

AnimeInfo:

import React, { Component } from "react";

export class AnimeInfo extends Component {
  render() {
    return <span>..watching anime</span>;
  }
}

export default AnimeInfo;

OtherInfo:

import React, { Component } from "react";

export class OtherInfo extends Component {
  render() {
    return <span>..simple test</span>;
  }
}
export default OtherInfo;

Info is retrieved by looping into infos array. (This is properly working, see React - Component is not re-rendered when state is changed)

I have followed https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad to capitalize Info and make sure it is properly treated as a JSX component.

Typing component is from https://github.com/notadamking/react-typing-animation.

Info is displayed (and swapped) outside Typing but not inside. As Info is swapped, it means updateDisplayedInfo is called, so the Typing.onFinishedTyping is triggered. I don't understand why Info isn't displayed in Typing. Is it a library related issue?

I thing it can be that the actual state of the Typing component is not changes and it’s content is not re-rendered. Also what is the point of having the ‘loop’ prop to the Typing component when you want to change the state anyway. One proposal is to remove the loop prop and add probably key prop with ‘this.state.currentIndex’ as a value. This will cause the Typing component to re-render always when you change the info component... — Alexander Dimitrov
– Alexander Dimitrov, Commented Dec 21, 2019 at 20:55

marzelin · Accepted Answer · 2019-12-21 21:08:18Z

3

If you look at library source code, you'll see why this won't work.

The lib gets the text from node.props.children, so you have to pass some text directly to <Info> component to get it rendered. Also the text to be animated is passed back to that component, so the component needs to be able to show the children passed to it:

const Info = ({children}) => {
  return (
    <h1>{children}</h1>
  )
}


<Typing>
  <Info>
    this is `props.children`
  </Info>
</Typing>

edited Dec 21, 2019 at 21:08

answered Dec 21, 2019 at 21:02

marzelin

11.7k5 gold badges39 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

React - Component stored as variable not rendered in nested component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related