Donovan Hiland Professional Experience and Skills [UPDATED]

UPDATED summary of professional skills and experience.



Donovan Hiland

Donovan Hiland - Professional Experience and Skills

Brief summary of professional experience and skills.



Donovan Hiland

Donovan Hiland GitHub Contributions and Publication Credits

Short list of GitHub contributions and publication credits.



[Donovan Hiland]

Donovan Hiland Influencers

List of professional influencers.



[Donovan Hiland]

ReactJS: Embedded expression rendering as array instead of individual elements

User, im1dermike, wants to know why an embedded ReactJS expression is rendering as an array instead of individual elements

He has the following nested components:

<Table data={records}>
    <TableColumn field="code">Code</TableColumn>
    {columns.map((column, i) => (
      <TableColumn key={column} field={column}>
        {column}
      </TableColumn>
    ))}
</Table>

StackOverflow user, Donovan Hiland, answer:

Your JSX compiles down to something that looks like this:

const TableColumn = React.createElement('div', { field: 'code' }, 'Code')
const Table = React.createElement('div', {}, [
  TableColumn,
  columns.map((column, i) =>
    React.createElement('div', { key: column, field: column }, column),
  ),
])

You can see the children of Table include a react element, and an array of react elements. Iterating over the children array directly will give you just that.

React provides a top level api for this kind of thing -- React.Children -- which traverses child arrays in your iterations with React.Children.map and React.Children.forEach.

The adjusted function would look like:

getDefaultSortColumn() {
  let col = this.props.children[0].props.field;
  React.Children.forEach(this.props.children, (column) => {
    if (column.props.sortDefault) {
      col = column.props.field;
    }
  });
  return col;
}

im1dermike follow up question: 

That results in the following error:
Argument of type '(column: ReactElement<any>) => void' is not assignable to parameter of type '(child: ReactChild, index: number) => any'. Types of parameters 'column' and 'child' are incompatible. Type 'ReactChild' is not assignable to type 'ReactElement<any>'. Type 'string' is not assignable to type 'ReactElement<any>'

Donovan Hiland answer

Type checking aside, the answer is still valid and is the preferred/recommended method for looping over children in React without having to check for nested arrays. I'll update the answer to exclude the type checking bit and let you figure that part out. 

See here for example: codesandbox.io/s/jvxqvw3813



https://stackoverflow.com/users/7165303/donovan-hiland

ReactJS - How to remove whole component by using child button

Mr. Klisiu wants to create TODO app in ReactJS with functionality like:

1. onClick is showing/hidding AddTaskBox (form in div, where you have to write title and describtion )
2. In visable AddTaskBox is button with "x" and I want to use him to delete whole "AddTaskBox"

Klisiu thinks his library may be wrong.

His code:

import React from 'react';
import ReactDOM from 'react-dom';

class AddButton extends React.Component{

  constructor(){
      super();

      this.state = {
      isHidden: false
    }
  }

  toggleHidden () {
      this.setState({
        isHidden: !this.state.isHidden
      })
  }

  render(){
    return(
      <div>
        <div
          onClick={this.toggleHidden.bind(this)}
          className="addtask__btn">
          +
        </div>
        {this.state.isHidden && <AddTaskBox />}
      </div>
    );
  }
}

class AddTaskBox extends React.Component{
  render(){
    return(
      <div className="addtask__box" >
        <button> x </button> // here is my x to close component
        <form>
          <input type="text" placeholder="Nazwa Czynności"/>
          <textarea>
            Opis czynności do wykonania
          </textarea>
          <input className="btn" type="Submit" value="Submit"/>
        </form>
      </div>
    );
  }
}

export {AddButton, AddTaskBox};

StackOverflow user, Donovan Hiland, answer:

Assuming by AddTaskComponent you mean AddTaskBox you would pass the toggleHidden function to AddTaskBox

{this.state.isHidden && <AddTaskBox onClose={this.toggleHidden.bind(this)} />}

and then call the function from the child on click

<button onClick={this.props.onClose}> x </button>

https://stackoverflow.com/users/7165303/donovan-hiland