I'm making a calculator app in react-native. I'm creating calculator buttons with map funtion but of course every single button looks the same is there a way to change style for a single element or should i change the way the buttons are created. This is my "sample" button

import React, {Component} from "react"; 
import { StyleSheet, Text , TouchableOpacity, } from "react-native";
    
    
    export default class InputButton extends React.Component{
        render() {
    
            const{value,handleOnPress} = this.props;
    
        return (
                <TouchableOpacity
                    style={styles.container}
                    onPress={()=> handleOnPress(value)}>
                        <Text style={styles.text}>{value}</Text>
    
                </TouchableOpacity>
    
        );
        } }
    
    const styles = StyleSheet.create(
        {
            container:{
                flex:1,
                margin: 1,
                backgroundColor: 'black',
                justifyContent:"center",
                alignItems: 'center'
            },
    
            text:{
                fontSize: 30,
                color: 'white',
                fontWeight: 'bold'
            }
    
        });

And that's my function in main component that return entire layout of buttons:

renderButtons = () =>{

       console.log(SCREEN_WIDTH   " "   SCREEN_HEIGHT)

      if(SCREEN_HEIGHT > SCREEN_WIDTH){

        let layouts = buttons.map((buttonRows,index)=>{
            let rowItem = buttonRows.map((buttonItems,buttonIndex)=>{
                return <InputButton
                value={buttonItems}
                handleOnPress={handleInput.bind(buttonItems)}
                key={'btn-'  buttonIndex}/>
            });
            return <View style={styles.inputRow} key={'row-'   index}>{rowItem}</View>
        });

        return layouts
      }

      
      else 
      {
        let layouts = buttons_landscape.map((buttonRows,index)=>{
          let rowItem = buttonRows.map((buttonItems,buttonIndex)=>{
              return <InputButton
              value={buttonItems}
              handleOnPress={handleInput.bind(buttonItems)}
              key={'btn-'  buttonIndex}/>
          });
          return <View style={styles.inputRow} key={'row-'   index}>{rowItem}</View>
      });

      return layouts

      }
    }

I'm using these array to make the button layouts:

const buttons = [
    ['AC','DEL'],
    ['7','8','9','/'],
    ['4','5','6','-'],
    ['1','2','3','*'],
    ['0','.','=',,' ']
];

const buttons_landscape = [
  ['DEL','x!','e',' /-','%','AC'],
  ['10^x','√','2','8','9','/'],
  ['log10','e^x','4','5','6','-'],
  ['x^2','ln','1','2','3','*'],
  ['x^3','π','0','.','=',' ']
];

And my question is how can I change the way that I create the buttons and layouts so that every sigle one has unique properties OR change the style of singular button

CodePudding user response：

You could, for example, replace

return <View style={styles.inputRow} key={'row-'   index}>{rowItem}</View>

with something along those lines

return <View style={someFunction(buttonItems, buttonIndex)} key={'row-'   index}>{rowItem}</View>

where someFunction return the expected style (defaulting to styles.inputRow, I guess).

(Also, is your else block almost identical with the if block, the only difference being buttons v. buttons_landscape? It would be better if it accepted buttons as argument, instead of repeating the same 8 lines of code).

CodePudding user response：

You could break RowItem out into its own component and provide styles as if it were an individual row item, then map the results to an instance of the RowItem.

function RowItem() {
  return (
    <button
      onClick={xxx}
      className="xxx"
    >
      {props.value}
    </button>
  );
}

function Buttons() {
  return (
    <table>
     <thead>
       ...
     </thead>
     <tbody>
      {props.buttons.map((button) => (
       <RowItem button={button} key={button.id} />
       )
      }
     </tbody>
    </table>
  );
}