use a component in react again

Question

i am making a markdown previewer as a project in freecodecamp and i want to do it using react. i made 6 components - app, toolbar, editor-window, editor, preview-window, preview.

1. app is parent component divided in 2 - editor-window and preview-window.
2. editor-window is further divided in 2 - toolbar and editor.
3. preview-window - toolbar and preview.

so in order to not repeat the code, i want to use the the same toolbar component for both my windows. the toolbar component contains a maximise button which on clicking makes the window occupy full screen. my problem is that when i click one of the button both my windows acquire full screen. i wanted to know if it is even possible in react to differentiate between the editor toolbar and preview toolbar or not? or would i have to make 2 separate components for both the toolbars. and if so, is there a way so that i don't have to copy my code twice.

class Toolbar extends React.Component{
  constructor(props){
    super(props);
  }
  componentDidMount(){
    $('.full-screen-btn').click(this.maximise);
  }
  render(){
    return(
      <div className='toolbar'>
        <div>
        {this.props.window} window
        </div>
        <i className='fas fa-arrows-alt full-screen-btn'></i>
       </div>
    );
  }
}

class EditorWindow extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div id='editor-window'>
        <ToolbarEditor window='editor'/>
        <Editor handleChange={this.props.handleChange} input={this.props.input}/>
      </div>
    )
  }
}

i am new to react so if there is anything that you think i could have done in a better way, please leave a comment.

Answer 1

You can remove jquery as you don't need it, you should rely on React to handle DOM manipulations. You can use an onClick handler on your i element, and pass your window prop as an arg.

<i className='fas fa-arrows-alt full-screen-btn' onClick={() => this.maximize(this.props.window)}></i>