Everything between {} in the JSX is just JavaScript, so you can do the following:

{props.stories.map((story) => {
  const storyObj = (story.type === 'story' && story.story) ? story.story : story;
  return (
    <div key={story.id}>
      <SliderItem story={storyObj} />
    </div>
  );
})}

Using ES6 syntax in React does not bind this to user-defined functions however it will bind this to the component lifecycle methods.

So the function that you declared will not have the same context as the class and trying to access this will not give you what you are expecting.

For getting the context of class you have to bind the context of class to the function or use arrow functions.

Method 1 to bind the context:

class MyContainer extends Component {

    constructor(props) {
        super(props);
        this.onMove = this.onMove.bind(this);
        this.testVarible= "this is a test";
    }

    onMove() {
        console.log(this.testVarible);
    }
}

Method 2 to bind the context:

class MyContainer extends Component {

    constructor(props) {
        super(props);
        this.testVarible= "this is a test";
    }

    onMove = () => {
        console.log(this.testVarible);
    }
}

Method 2 is my preferred way but you are free to choose your own.

Update: You can also create the properties on class without constructor:

class MyContainer extends Component {

    testVarible= "this is a test";

    onMove = () => {
        console.log(this.testVarible);
    }
}

Note If you want to update the view as well, you should use state and setState method when you set or change the value.

Example:

class MyContainer extends Component {

    state = { testVarible: "this is a test" };

    onMove = () => {
        console.log(this.state.testVarible);
        this.setState({ testVarible: "new value" });
    }
}

render() {
    // assuming 'changeMyVariable' returns a value
    const myVariable = this.changeMyVariable();

    return (
        <div>{myVariable}</div>
    );
}

Actually you can invoke the function inside your JSX itself:

<div>{this.changeMyVariable()}</div>.

Note: If the output of this.changeMyVariable() never changes based on new props, it is better to compute the value outside render (avoid re-calculating when component re-renders).

How about using state!!

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.

class App extends React.Component  {
  constructor (props) {
    super(props);
    this.state ={valueOfInput:''}
  }
  change(e){
    valueOfInput = e.target.value;
    this.setState({valueOfInput});
  }
  submit(ev){
    ev.preventDefault();
    alert(this.state.valueOfInput)
  }
  render() {
    return(
      <div>
        <form action="">
          <input onChange={this.change.bind(this)} type="text" value={this.state.valueOfInput}/>
          <input onClick={this.submit.bind(this)} type="submit"  value='submit'/>
        </form>
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Happy coding!!! Hope this helps.