React - Passing props from Array to Div

Question

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.

Just to clarify, you're confused about how to pass the object of the clicked directory/file to the textBox component? — Devin Fields, Apr 26 '18 at 23:41
@DevinFields Exactly. Before I made this example right here, so I could get further understanding: https://codesandbox.io/s/8pkl8w6xy0 — RCohen, Apr 26 '18 at 23:42
This question may help you https://stackoverflow.com/questions/32414308/updating-state-on-props-change-in-react-form?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa also this: https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops — Devin Fields, Apr 26 '18 at 23:47
basically, add a prop to textBox: Then use getDerivedStateFromProps to compare the current and new prop coming in and setState if it is different. — Devin Fields, Apr 26 '18 at 23:50
@DevinFields Hm, okay I think I understand. In this case, I should apply `getDerivedStateFromProps ` inside the ``, yes? — RCohen, Apr 26 '18 at 23:53
In the future please put any relevant code in the question as external links can be removed. — Jhecht, Apr 27 '18 at 00:22

score 2 · Accepted Answer · answered Apr 27 '18 at 00:01

2

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.

answered Apr 27 '18 at 00:01

Marco Afonso

316
2
11

`getDerivedStateFromProps` is more up to date as `componentWillReceiveProps` will get deprecated – h1b9b Apr 27 '18 at 00:09
It's exactly what you provided, but instead of ./lib/greeting.rb, it's something like this { type: "directory", name: "./lib", contents: [{ type: "file", name: "./lib/greeting.rb" }] } I'm looking to pass to TextBox @Marco Afonso – RCohen Apr 27 '18 at 14:13

React - Passing props from Array to Div

1 Answers1