React.js State Nedir?

React.js ile ikinci yazımızda ‘State’ kavramını ele alacağız. State, bir componentle ilgili dataları taşıyan javascript objesidir. Sadece class component ile kullanılabilir. Teknik olarak functional componentlerde de ‘hooks’ olarak kullanılabilir. State’de bir değişiklik yapmak istediğimizde render() metodu çalışır ve component render edilir. Bir component oluşturulduğunda state başlatılmalıdır ve state’ler sadece ve sadece ‘setState()‘ fonksiyonu ile güncellebilir. State yazımı iki türlü yapılabilir;

 
class App extends React.Component {
constructor(props) {
super(props);
this.state = { lat: null, errorMessage: '' };
}
class App extends React.Component {
state = { lat: null, errorMessage: '' }

State yazımını anlatmak ve setState() kavramını göstermek adına aşağıdaki örneğe göz atalım. Burada lifecycle metodlarına da değinmek gerekiyor fakat ona da bir sonraki yazımızda değineceğiz.

index.js—

import React from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './SeasonDisplay';

class App extends React.Component {

state = { lat: null, errorMassage: '' }

componentDidMount() {
window.navigator.geolocation.getCurrentPosition(
position => this.setState({ lat: position.coords.latitude }),
err => this.setState({ errorMassage: err.message })
);
}

renderContent() {
if (this.state.errorMassage && !this.state.lat) {
return <div>Error: {this.state.errorMassage}</div>;
}

if (!this.state.errorMassage && this.state.lat) {
return <SeasonDisplay lat={this.state.lat} />
}
}

render() {
return (
<div className="border red">
{this.renderContent()}
</div>
);
}
};

ReactDOM.render(<App />, document.querySelector('#root'));

SeasonDisplay.js—

import React from 'react';

const seasonConfig = {
summer: {
text: 'Lets go to the beach',
iconName: 'sun'
},
winter: {
text: 'Brrr, very cold !',
iconName: 'snowflake'
}
};

const getSeason = (lat, month) => {
if (month > 2 && month < 9) {
return lat > 0 ? 'summer' : 'winter';
} else {
return lat < 0 ? 'winter' : 'summer';
}
}

const SeasonDisplay = props => {

const season = getSeason(props, new Date().getMonth());
const {text, iconName} = seasonConfig[season];

return(
<div className={`season-display ${season}`}>
<i className={`icon-left huge ${iconName} icon`} />
<h1>{text}</h1>
<i className={`icon-right huge ${iconName} icon`} />
</div>
);
};

export default SeasonDisplay;

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.