CODEWITHSUNDEEP
javascriptreactjs
RCohen
RCohen

Reputation: 1992

React - Passing props from Array to Div

I'm developing a more complex example of passing props from a component to another. In this case, it's the content of an array(when I click on that content) to a <div>.

You can find the code here: https://codesandbox.io/s/509j5npkwx

(Please check the code in the link above)

TextBox <div> component:

export class TextBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "Select A Node To See Its Data Structure Here..."
    };
    this.changeContent = this.changeContent.bind(this);
  }

  changeContent(newContent) {
    this.setState({
      content: newContent
    });
  }

  render() {
    return (
      <div className="padd_top">
        <div className="content_box">{this.state.content}</div>
      </div>
    );
  }
}

export default TextBox;

FileTree component: 

export class FileTree extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeNode: null
    }
    this.setActiveNode = this.setActiveNode.bind(this)
  }

  setActiveNode(name) {
    this.setState({ activeNode: name })
  }

  render() {
    return (
      <div className="padd_top">{
        renderTree(
          this.props.root || root,
          this.setActiveNode,
          this.state.activeNode
        )
      }
      <TextBox />
      </div>
    )
  }
}

I'm trying to do something like this, for further understanding: http://alexcurtis.github.io/react-treebeard/

I understood how to prepare the <div> to receive new information, by substituting the "Select A Node To See Its Data Structure Here..." when I click one of the elements belonging to the file tree.

I also understood how to prepare the file tree to pass content <div>, but in this case, I'm confused about where and how should I apply to the right component.

I'm new to React JS. If you have any tips for me about this issue, I'm very grateful.

Thank you.

I changed a bit the structure of my project, and now I'm looking forward to put <TextBox> and <FileTree> side by side.

More specifically, like this:

export class App extends React.Component {
render() {
    return (
    <div>
        <div className="col-md-12">
            <SearchEngine />
        </div>
        <div className="col-md-6">
            <FileTree />
        </div>
        <div className="col-md-6">
            <TextBox content={this.props.activeNode} />
        </div>
    </div>
    );
}
}

I tought it wouldn't be different to pass props to <App>, but again I might be missing something, because it's not passing properly. What is missing here?

Thanks again.

Upvotes: 0

Views: 1638

Answers (1)

Marco Afonso
Marco Afonso

Reputation: 316

I'm not sure if I understood your question.

Here is my fork: https://codesandbox.io/s/50pv75q8ll

Basically, you pass the activeNode to < TextBox />. Look at line 126 of index.js.

And then, in text_box.js use componentWillReceiveProps() to set the TextBox state with the content prop. Line 18 of text_box.js.

Upvotes: 2

Related Questions